CSS Hilfe bei Navigation

[johnnyderdepp]

Hallo,

ich habe eine Navigation auf der linken seite (2 spalten layout) wenn ich einen link anklicke, dann sollten die unterpunkte angezeigt werden.

Z.b ich klick produkte, dann sollten 3 <a> alemente unter produkte erscheinen.
wenn ich jedoch die visibility auf hidden stelle, dann ist der platz leer, wie kann ich elemente verstecken, dass kein leerraus ist ?

 

[Timmer]

Benutz dazu "display:none;", dies blendet den kompletten Teil aus, als wäre er nicht im Quellcode. "visibility:hidden;" macht es nur unsichtbar, behält aber den Platz, den es einnimmt, frei ;)

 

[johnnyderdepp]

Danke, funktioniert jedoch noch 2 Fragen hier erstmal mein code

<a href="#">Home</a>
        <a href="Produkte.html" id="produkte">Produkte</a>
        <a href="#" class="hid">Stehlampe</a>
        <a href="#" class="hid">Tisch</a>
        <a href="#">&Uuml;ber uns</a>
        <a href="#">Kontakt</a>

#navigation .hid {
    display: none;
        -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

#produkte:hover+.hid {
    display: inline;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;

}

es wird nur die stehlampe eingeblendet, aber nnicht der tisch & die transition geht auch ned ...
außerdem, wenn ich dann eine unterkategirue hovern will, verschwinden sie weil ja "produkte" nicht gehovert wird

 

[Zejo]

Es hat sich im Webdesign eingebürgert, dass man solche navigationsmenüs aus Listen macht, in denen sich <a href=""></a> Tags befinden.

also z.b.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Um da jetzt Untermenüs zu setzen wird in einem "Listen-Tag" <li> wieder eine unsortierte Liste gesetzt:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkte</a>
<ul>
<li><a href="#">Stehlampe</a></li>
<li><a href="#">Tisch</a></li>
</ul>
</li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Sollte das alles Neu für dich sein, versuche erst mal ne einfache Navigation zu bauen, bevor du eine 2 ungeordnete Liste einbaust.

Das Design fügt man dann alles mit CSS hinzu, z.B. so:

nav ul, nav ul li ul  {
   list-style-type: none;
   margin: 0;
   padding: 0;

}

nav ul li ul {
  display: none;

}

nav ul li:hover ul {
  display: block;
}

nav ul li ul {
position: absolute;
left: 80px;
top:28px;

}

nav ul li ul li {
  float: left;
  padding: 0 10px;
}

Das Ergebnis ist ein Menü, indem das Untermenü seitlich auftaucht (siehe Bild)