• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Warum funktioniert mein Menü nicht als dropdown?

L

lina123123

Neues Mitglied
Könntet ihr mir bitte helfen darausein dropdown zu machen Dienstag ist meine Prüfung und ich bin verzweifelt? LG Lina Schulze

HTML 5 :

<!doctype html>
<html lang="en-US">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato|Lobster" rel="stylesheet">
<meta charset="UTF-8">
<title>Garden7</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="jq/jquery-ui.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script src="jq/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>



</head>
<body>
<!-- Main Container -->
<div class="container">
<!-- Navigation -->
<header > <a href="header">
<img src="images/logo.png" alt="Logo" width="200" height="200" class="logo"/> </a>
<nav >
<ul class="navtext">
<li><a href="#home"></a></li>
<li><a href="#kleingartenverein">Kleingartenverein</a>
<ul>
<li><a href="#Verein">Verein</a></li>
<li><a href="#termine">Termine</a></li>
<li><a href="#parzellen">Parzellenverwaltung</a></li>
</ul>
</li>

<li><a href="#Parzellenverwaltung">Urban Gardening</a>&nbsp;</li>
<li><a href="#urbangardening">Galerie</a></li>
<li><a href="#angebotetermine">Kontakt</a></li>
<li><a href="#impressum">Impressum</a></li>
</ul>
</nav>
</header>

EXTERNE CSS:

nav { float: right;
width: 80%;
text-align: right;
margin-right: 25px;
font-size: 20px;}
header nav ul {
list-style: none;
float: right;

}
nav ul li {
float: left;
color: #FFFFFF;
text-align: left;
margin-right: 25px;
letter-spacing: 2px;
transition: all 0.3s linear;
font-weight: 400;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
ul li:hover a {
color: #f5f50c;
}
 
Warum das nicht funktioniert? ... weil du in deinem CSS nichts drin hast, was es zum funktionieren bringen könnte.
1. Dein Untermenü (<ul>...</ul>) muss aus dem Textfluss raus genommen werden... mit 'position: absolute;'
2. Dann dürfen die <li>..</li> in deinem Untermenü nicht mehr 'floaten', die Unterpunkte sollen ja untereinander stehen - oder? ... 'float: none;'
3. Das Untermenü soll zunächst nicht zu sehen sein... also muss es mit 'diplay: none;' ausgeblendet werden.
4 Damit es sichtbar wird beim hovern muss dann natürlich eine entsprechende Anweisung :hover über dem <li> in der Hauptmenüzeile folgen, der dann das Untermenü auf 'display: block;' schaltet!
Das sind 3 einfache CSS Formatierungen, die die Funktionalität herstellen... der Rest wäre nur noch 'aufhübschen'.
 
ich versuche es gleich mal, ich kann halt eigentlich garnicht programmieren, wie man sohl auch sieht ich mache ja die Ausbildung zur screendesign Assistenz. Man ihr seit echt nett. ich danke euch schonmal im Voraus und wenn es nicht funktioniert dann melde ich mich nochmal
 
basti1012 schrieb:
In diesen fall können viele Wege nach Rom führen. An besten kuckst du dir mal alle möglichkeiten bei codepen an wie man sowas machen könnte.
Ein weg wäre so
https://codepen.io/basti1012/pen/Lmaepx
Zum Vergrößern anklicken....
hey! oh man verdammt! Ich hab so ein glück mit euch heute gehabt! ES ist so verdammt gut gelaufen mit deinem Beispiel! vielen dank! ich hab es zwar nicht ganz kopiert aber die letzten beiden css teile haben schon gereicht. kennst du dich vielleicht mit sag aus?
 
Sailor schrieb:
Warum das nicht funktioniert? ... weil du in deinem CSS nichts drin hast, was es zum funktionieren bringen könnte.
1. Dein Untermenü (<ul>...</ul>) muss aus dem Textfluss raus genommen werden... mit 'position: absolute;'
2. Dann dürfen die <li>..</li> in deinem Untermenü nicht mehr 'floaten', die Unterpunkte sollen ja untereinander stehen - oder? ... 'float: none;'
3. Das Untermenü soll zunächst nicht zu sehen sein... also muss es mit 'diplay: none;' ausgeblendet werden.
4 Damit es sichtbar wird beim hovern muss dann natürlich eine entsprechende Anweisung :hover über dem <li> in der Hauptmenüzeile folgen, der dann das Untermenü auf 'display: block;' schaltet!
Das sind 3 einfache CSS Formatierungen, die die Funktionalität herstellen... der Rest wäre nur noch 'aufhübschen'.
Zum Vergrößern anklicken....
sorry die andere methode der anderen person fiel mir erstmal leichter ich danke dir jedoch für deine schnelle Antwort. vielleicht lag es daran das ich mich wirklich nicht so auskenne und anhand seines Beispiels es mir leichter fiel. danke dir und einen sonnigen tag noch.
 
Ja also es ist echt ziemlich schwer zu erklären. ich hab halt ein Bild in Illustrator erstellt. einen Parzellen Olaf. hier habe ich dann eine ebene erstellt die parzellenplan heisst und habe in der ebene alle einzelnen Vektoren dann benennt. parzelle1 Parzelle2 usw. bis Parzelle 149 .... dann habe ich jede Parzelle die in der Ausgabe relevant war. Parzelle 18, 31, 60, 104 und ,105 genommen und daraus eine Gruppe gemacht die Gruppen dann nur nach der zahl benannt.

Und dann musste ich halt noch eine Grafik in der selben ai Datei erstellen, es sollte ein kästen sein mit text der die Parzelle beschreibt. hab ich auch gemacht und tooltip genannt. der tooltip ist halt auch eine Gruppe worin ein Vektor als kästen ist und eine Schrift. so und das selbe wie in der Illustrator Datei zu sehen ist sieht man ja eigentlich auch in der SVG nur bisschen anders.

Ich soll halt jetzt die Funktion da einbauen. also dann ja in dream weaver programmieren das wenn ich auf die Parzelle gehe die halt relevant ist das der kästen mit dem text erschein und wieder verschwindet wenn ich außerhalb des Bereiches gehe. sorry ich kenne mich echt schlecht aus und ich bin auch schwer vom kp.

https://pastebin.com/kJ3s3urD
 
Hier meine Antwort nochmal öffentlich im Thread gepostet:
Hier die Lösung: https://pastebin.com/jVbe844B
Da es sich bei den Tooltip-"Containern" um "Container" mit Attribut ID und nicht CLASS handelte musste der "." im Style durch "#" ersetzt werden.
Dieser Codeabschnitt
CSS: 
/*Hover für 5 parzellen - ausgeblendet↓*/
        .tooltip18, .tooltip31, .tooltip60, .tooltip104, .tooltip105
        {
            opacity: 0;
        }
    /*Hovereffekt parzelle18↓*/
        #_18:hover ~.tooltip18
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle31↓*/
        #_31:hover ~.tooltip31
        {
        opacity:1;
        }
     
     
        /*Hovereffekt parzelle60↓*/
        #_60:hover ~.tooltip60
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle104↓*/
        #_104:hover ~.tooltip104
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle105↓*/
        #_105:hover ~.tooltip105
        {
        opacity:1;
        }
wird zu
CSS: 
/*Hover für 5 parzellen - ausgeblendet↓*/
        #tooltip18, #tooltip31, #tooltip60, #tooltip104, #tooltip105
        {
            opacity: 0;
        }
    /*Hovereffekt parzelle18↓*/
        #_18:hover ~#tooltip18
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle31↓*/
        #_31:hover ~#tooltip31
        {
        opacity:1;
        }
     
     
        /*Hovereffekt parzelle60↓*/
        #_60:hover ~#tooltip60
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle104↓*/
        #_104:hover ~#tooltip104
        {
        opacity:1;
        }
     
        /*Hovereffekt parzelle105↓*/
        #_105:hover ~#tooltip105
        {
        opacity:1;
        }
Ich hoffe, ich konnte helfen.
Grüße,
Felixprogram
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben