Zusätzliche Nav Leiste anzeigen lassen

andreas71 · 15. Mai 2014

HTML

<nav>
   <ul>




         <li><a href="seite1"><Seite1><a/><li/>
         <li><a href="seite2"><Seite2><a/><li/>
         <li><a href="seite3"><Seite3><a/><li/>
                                                   <ul>
                                                         <li><a href="seite3a"><Seite3a><a/><li/>
                                                         <li><a href="seite3ab"><Seite3ab><a/><li/>
                                                          <li><a href="seite3ac"><Seite3ac><a/><li/>
                                                           <li><a href="seite3ad"><Seite3ad><a/><li/>
                                                     <ul/>
         <li><a href="seite4"><Seite4><a/><li/>
         <li><a href="seite5"><Seite5><a/><li/>
<nav/>

Alles anzeigen

Hallo

Ich würde gerne die Nav Seiten (Seite3a,ab,ac,ad) gerne so haben daß wenn man auf die
Seite3 klickt, daß dann erst Seite3a,ab,ac,ad sichtbar ist und jeder dieser Einzelseiten anklickbar ist.

kann mir hier jemand einen Tipp geben

danke und lg
andreas71

wolf · 16. Mai 2014

Meinst du so?: http://jdav-wuerzburg.de

dekonstruktiv · 16. Mai 2014

Grundsätzlich wird das verschachtelte ul per display : none versteckt und mit li:hover > ul wieder in den block-level Zustand zurückversetzt.
Die Positionierung wird meist absolute eingerichtet, da sonst keine Überlagerung anderer Elemente möglich ist.

Gibt es einen Grund weshalb die Anzeige nur bei Klick ausgeführt werden soll?

wolf · 16. Mai 2014

Der Ansatz ist gut, wenn du ne Lösung brauchst und nicht drauf kommst, schreib nochmal hier

andreas71 · 17. Mai 2014

ja genau dass meinte ich

also wenn ich daß richtig verstanden habe muss ich im html ul normal verschachtelen und den Bereich den ich aufklicken lassen will im css mit display: none und li:hover beschreiben oder?

also etwa so wenn ich Test1 aufklicken lassen will bei Maus drüber fahren?

HTML

<ul>




        <li>..........</li>
         <li>..........</li>
         <li>..........</li>
                    <ul>
                         <li>..test1........</li>
                     </ul>
</ul>

Alles anzeigen

CSS

ul ul li   {
 
   display:none
}







ul ul li:hover  {

}

Alles anzeigen

hier ist mal meine html navi bereich

HTML

<nav class="textclorblack" >
        <ul >
                <li><a href="index.html">Startseite</a></li>
                <li><a href="ueber-mich.html">Über Mich</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
                <li><a href="kosmetik.html">Kosmetik</a></li>










                                      <ul>




                                                <li><a><strong>Gesicht</strong></a></li>
                                                <li><a href="fuesse.html">Füsse</a></li>
                                                <li><a href="haende.html">Hände</a></li>
                                                <li><a href="haare.html">Haare</a></li>
                                                <li><a href="make-up.html">Make Up</a></li>
                                                <li><a href="parfuem.html">Parfüm</a></li>

























                                        </ul>




        </ul>










        <ul>




                    <li><a href="ernaehrung.html">Ernährung</a></li>




                                        <ul>










                                                <li><a href="essen.html">Essen</a></li>
                                                <li><a href="trinken.html">Trinken</a></li>







                                        </ul>







        </ul>



















</nav>

Alles anzeigen

wolf · 17. Mai 2014

Gewöhne dir mal an ohne die leerzeilen und mit ordentlicher Einrückung zu arbeiten, dann siehst du ganz schnell wieso es nicht gehen kann....

HTML

<nav class="textclorblack" >
    <ul >
        <li><a href="index.html">Startseite</a></li>
        <li><a href="ueber-mich.html">Über Mich</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="kosmetik.html">Kosmetik</a></li>
        <ul>
            <li><a><strong>Gesicht</strong></a></li>
            <li><a href="fuesse.html">Füsse</a></li>
            <li><a href="haende.html">Hände</a></li>
            <li><a href="haare.html">Haare</a></li>
            <li><a href="make-up.html">Make Up</a></li>
            <li><a href="parfuem.html">Parfüm</a></li>
        </ul>
    </ul>
    <ul>
        <li><a href="ernaehrung.html">Ernährung</a></li>
        <ul>
            <li><a href="essen.html">Essen</a></li>
            <li><a href="trinken.html">Trinken</a></li>
        </ul>
    </ul>
</nav>

Alles anzeigen

Ich nehme mal an es war eher so gedacht:

HTML

<nav>
    <!-- Erste Ebene -->
    <ul>
        <!-- Erste Ebene -->
        <li><a href="index.html">Startseite</a></li>
        <li><a href="ueber-mich.html">Über Mich</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li>
            <a href="kosmetik.html">Kosmetik</a>
            <!-- Zweite Ebene -->
            <ul>
                <!-- Zweite Ebene -->
                <li><a href="gesicht.html">Gesicht</a></li>
                <li><a href="fuesse.html">Füsse</a></li>
                <li><a href="haende.html">Hände</a></li>
                <li><a href="haare.html">Haare</a></li>
                <li><a href="make-up.html">Make Up</a></li>
                <li><a href="parfuem.html">Parfüm</a></li>
            </ul>
        </li>
        <li>
            <a href="ernaehrung.html">Ernährung</a>
            <!-- Zweite Ebene -->
            <ul>
                <!-- Zweite Ebene -->
                <li><a href="essen.html">Essen</a></li>
                <li><a href="trinken.html">Trinken</a></li>
            </ul>
        </li>
    </ul>
</nav>

Alles anzeigen

Man sieht den unterschied kaum aber es macht technisch viel aus..

The Scout · 17. Mai 2014

Genau, wolf hat dir schon das HTML geliefert, CSS Basis sieht dann ungefähr so aus:

CSS

/* Um brwoserspeifische Lücken zu unterdrücken */
* {
    margin: 0;
    padding: 0;
}




/* Die Unterseiten verstecken */
nav ul ul {
    display: none;
}
nav ul ul li {
    display: none;
}




/* Beim hovern der Überseite anzeigen */
nav ul li:hover > ul {
    display: block;
    position: absolute;
}
nav ul li:hover li {
    display: block;
}

Alles anzeigen

Keine Garantie auf Erfolg

wolf · 18. Mai 2014

Hier Garantie auf Erfolg

http://jsfiddle.net/wolfwortmann/M3Ze6/

CSS

*{
    padding: 0;
    margin: 0;
}
/* ## NAVIGATION ########## */
nav{
    color: rgba(0,0,0, 1);
}
nav li a{
    color: rgba(0,0,0, .5);
    display: inline-block;
    padding: 10px;
    min-width: 100px;
    transition: all 0.9s;
}
nav li{
    list-style-type: none;
    background-color: rgba(255,255,255,.6);
    transition: all 0.4s;
}
/* Erste Ebene Extra behandeln*/
nav>ul>li{
    /* Das hier sorgt dafür, dass alle Elemente der 1. Ebene nebeneinander stehen */
    display: inline-block;
    padding: 0px;
    background-color: rgba(255,255,255,.0);
}
nav>ul>li>a{
    padding: 10px;
    min-width: 0px;
}
/* Verschachtelung verstecken */
nav ul ul{
    display: none;
    position: absolute;
}
nav ul ul>li{
    display: block;
}
/* Verschachtelung zeigen */
nav li:hover{
    background-color: rgba(0,0,0, .2);
}
nav li:hover>a{
    color: rgba(0,0,0, 2);
}
nav li:hover>ul{
    display: block;
}

Alles anzeigen

Zusätzliche Nav Leiste anzeigen lassen

Jetzt mitmachen!

Teilen