Drop Down ohne javascript

[elo63]

Hallo,

bin gerade dabei eine navigation zu machen war soweit fertig als ich feststellte das ich bei einen menuepunkt ein dropdown brauche.

Also sieht es z.B. aus

Home Anfahrt Preise Team Imressum

jetzt möchte ich das der Menüpunkt Team ein dropdown aufmacht mit 2 Eintägen (Menüpunkte), muss so sein.

Habe gegoogelt und rumexperimentiert aber es letzlich nicht richtig hinbekommen, es soll nur mit HTML 5 und CSS3 gemacht werden.

Jann mir jemand helfen oder kennt jemand eine Anleitung, habe das mit drpdown noch nicht gemacht.

mfg

elo63

 

[leveler]

sollte was für Dich dabei sein.

 

[photoman]

http://de.wikihow.com/Ein-Dropdown-Menü-mit-HTML-und-CSS-erstellen

guck da mal

 

[elo63]

Hallo,

danke erstmal habe jetzt alles hinbekommen. leider bekomme ich nocht hin wie man den zur Zeit aktive angeklickten Menupunkt hervorheben kann da die Menüpunkte so aufgebaut sind.
<li class="topmenu"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="wir.html">Wir über uns</a></li>
<li class="topmenu"><a href="impressum.html">Impressu</a></li>
usw.

Oder kann man es dann auch so machen mit einer zusätzlichen ID
<li class="topmenu" id="navi01"><a href="index.html">Willkommen</a></li>
<li class="topmenu" id="navi02"><a href="wir.html">Wir über uns</a></li>
<li class="topmenu" id="navi03"><a href="impressum.html">Impressu</a></li>

nur wie spreche ich die in CSS an.

mfg

elo63

 

[photoman]

kannst einfach immer dem aktiven menüpunkt die klasse active geben und dann kannst du im css die klasse active definieren

 

[lachender_engel]

Du musst das dynamisch machen und mit PHP eine Abfrage einbauen anhand Du testest ob ein Menüpunkt der aktuellen Seite entspricht und ergänzt dann den class-Tag um z.B. die Klasse aktive.
Kannst Du PHP programmieren?
Stellt Dein Server PHP bereit?

 

[Dobi78]

@elo63 Ich glaub das dürfte für Dich interessant sein...
KLICK MICH

 

[elo63]

Hallo,

erstmal danke, das sollte schon ohne PHP sein, ging vorher auch nur jetzt hatte ich das drop down Menü eingebaut.

Also wäre der Link so richtig

<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>

mfg

elo63

 

[elo63]

Hallo,

hier mal das HTML für die navi.

<nav>
<ul>
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>

Aber wenn ich diese erste ansprechen will in CSS geht es nicht
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>

Z.B.
nav li.active a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

oder so auch nicht

nav ul li.active a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

was mache ich falsch

mfg

elo63

 

[Aelfry]

Aber wenn ich diese erste ansprechen will in CSS geht es nicht
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>

Du musst den Klassennamen schon ins Klassen Attribut schreiben.
Da dürfen mehr als ein Name stehen

<li class="topmenu active"><a href="index.html">Willkommen</a></li>

 

[elo63]

Hallo,

wiedermal danke erstmal.

also so:
<nav>
<ul>
<li class="topmenu aktuell"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>

und css so:

nav li.aktuell a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

geht aber nicht sorry.

elo63

 

[elo63]

Hallo,

das ganze ist dafür um den aktuellen Link auf der Navigation zu markieren.

mfg

elo63

 

[photoman]

Du hast bei dem Menüpunkt "Team" das schließende li-tag vergessen. Aber daran dürfte es eigentlich nicht liegen denk ich mal.

Wenn du das http://jsfiddle.net/ da mal eingibst funktioniert das alles.

 

[elo63]

Hallo so habe jetzt es nochmal getestet, und wenn ich alle css befehle die ich bisher hatte wegnehme dann geht es, aber das ist nicht sinn der sache.

Hier das navi css:



nav ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}

nav li.topmenu {
float:left;
}

.topmenu a {
float:left;
width:110px;
text-align:center;
}

.topmenu ul{
display:none;
}

.topmenu a, .submenu a{
padding: 1px 5px; /* Abstände */
border: 1px solid #DBDBEA; /* Rahmengrösse und Farbe */
border-collapse: collapse; /* Rahmen */
color: black; /* Schriftfarbe */
text-decoration: none; /* Unterstreichung entfernen */
background-color: #73A7CE; /* Hintergrundfarbe Navi */
margin: 0;
}

.submenu a{
font-size:12px;
width:110px;
position:relative;
clear:both; /* special IE6 */
}

nav a:hover, .topmenu.on a {
color: black; /* Schriftfarbe Navi beim drüberfahren */
background-color:#C6DBEA !important; /* Hintergrundfarbe Navi beim drüberfahren */
}

.topmenu:hover ul {
display:block;
z-index:500;
}


egal wo ich auch das mit den aktuell einfüge, es geht dann zusammen nicht.

nav li.aktuell a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

was kann das sein.

mfg

elo63

 

[elo63]

Hallo photoman.
wenn ich den tag schliesse bricht die ganze seite um weiss auch nicht warum

elo63

 

[photoman]

nimm mal eine andere Farbe bei der Klasse aktuell. Das ist die gleiche Farbe die du vorher schon als background-color definiert hast.

 

[elo63]

Hallo,
danke aber habe das schon ghemacht war wohl ein versehen beim einfügen.

Es geht auch aber nur wenn wie geschrieben alle anderen css befehle gelöscht werden dann geht es merkwürdigerweise.

mfg
elo63

 

[elo63]

Hallo,

also anders gefragt, wie bekomme ich bei dieser navi

<nav>
<ul>
<li class="topmenu aktuell"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>



und diesem CSS

nav ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}

nav li.topmenu {
float:left;
}

.topmenu a {
float:left;
width:110px;
text-align:center;
}

.topmenu ul{
display:none;
}

.topmenu a, .submenu a{
padding: 1px 5px; /* Abstände */
border: 1px solid #DBDBEA; /* Rahmengrösse und Farbe */
border-collapse: collapse; /* Rahmen */
color: black; /* Schriftfarbe */
text-decoration: none; /* Unterstreichung entfernen */
background-color: #73A7CE; /* Hintergrundfarbe Navi */
margin: 0;
}

.submenu a{
font-size:12px;
width:110px;
position:relative;
clear:both; /* special IE6 */
}

nav a:hover, .topmenu.on a {
color: black; /* Schriftfarbe Navi beim drüberfahren */
background-color:#C6DBEA !important; /* Hintergrundfarbe Navi beim drüberfahren */
}

.topmenu:hover ul {
display:block;
z-index:500;
}

eine markierung für die aktuelle Seite in der Navigation hin, drehe gleich ab.

mfg

elo63

 

[photoman]

komisch bei mir funktioniert es auch wenn ich den rest im css drin hab

 

[elo63]

Hallo photoman,

das mit den geschlossennen ntag hat sich erledigt fehler gefunden.

mfg
elo63

PS aber das mit der aktuellen seite markieren geht nicht.