[CSS/HTML] horizontal nested menu

[Kiphaas7]

Probeer deze code niet in IE6, want daar werkt het (nog) niet in, omdat ik gebruik maak van de :hover functie. Maar dat is ook helemaal mijn probleem niet.

Ik wil een menu maken met 2 lagen, elke laag op een nieuwe regel, en elke laag moet de hele breedte kunnen gebruiken. Precies dit laatste is het probleem, en ik weet niet of (en hoe) ik dit met css moet oplossen, of dat ik mijn html moet aanpassen. Nou heb ik wel een aantal voorbeelden online gevonden, maar deze leunen (naar mijn zin) teveel op javascript en/of niet-semantische oplossingen, dus ben ik zelf "from scratch" maar eens begonnen.

uiteindelijk (wat niet relevant is voor dit probleem specifiek, maar wel voor het hele menu) is het de bedoeling dat alles behoorlijk graphics intensive gaat worden: de tabs komen over een foto te liggen en de tweede regel krijgt een gradient. Ik kan dus niet gaan moffelen met achtergrond kleuren.

Alvast bedankt!

Helaas heb ik even geen online plekje:

HTML:

<div id="menu">

    <ul>

        <li class="tab">Tab Name 1
            <ul id="first">
                <li><a href="#">Sub Cat 1A</a></li>
                <li><a href="#">Sub Cat 1B</a></li>
                <li><a href="#">Sub Cat 1C</a></li>
            </ul>
        </li>
            
        <li class="tab">Tab Name 2
            <ul id="second">
                <li><a href="#">Sub Cat 2A</a></li>
                <li><a href="#">Sub Cat 2B</a></li>
            </ul>
        </li>
            
        <li class="tab">Tab Name 3
            <ul id="third">
                <li><a href="#">Sub Cat 3A</a></li>
                <li><a href="#">Sub Cat 3B</a></li>
                <li><a href="#">Sub Cat 3C</a></li>
            </ul>
        </li>

    </ul>

</div>

Cascading Stylesheet:

#menu {
    background-color:red;
    width:800px;
    height:100px;
}

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

.tab {
    float:left;
    display:block;
    width:250px;
}

ul li ul {
    display:none;
}

ul li:hover ul {
    display:block;
}

ul li ul li {
    float:left;
    background-color:orange;
    width: 100px;
    text-align:center;
}

#second {   margin-left:-250px; }

#third {    margin-left:-500px; }

[ Voor 2% gewijzigd door Kiphaas7 op 21-07-2007 18:02 . Reden: typo's en update html ]

[r0bert]

Kun je duidelijker uitleggen wat je nu wilt?

code:

Tab Menu 1         Tab Menu 2     etc  ..       
   Subcat 1a          Subcat 2a       etc..
   Subcat 1b          Subcat 2b       etc..

Zo?

Ik snap het nu beter. Het hoofdmenu horizontaal naast elkaar, het submenu op 1 vaste plek wisselend bij de onmouseover?

Edit: En natuurlijk, wat gaat er nu fout (zeker handig omdat het niet online staat)

[ Voor 35% gewijzigd door r0bert op 21-07-2007 17:42 ]

[Kiphaas7]

r0bert schreef op zaterdag 21 juli 2007 @ 17:34:
Kun je duidelijker uitleggen wat je nu wilt?

code:

Tab Menu 1         Tab Menu 2     etc  ..       
   Subcat 1a          Subcat 2a       etc..
   Subcat 1b          Subcat 2b       etc..

Zo?

Edit: En natuurlijk, wat gaat er nu fout (zeker handig omdat het niet online staat)

Wat in jouw voorbeeld staat is wat ik net niet wil. Wat ik wil:

(met hover bedoel ik natuurlijk als je met je muis op Tab Name 1 gaat staan)

code:

Tab Name 1 (hover)      Tab Name 2      Tab Name 3
Sub Cat 1A      Sub Cat 1B      Sub Cat 1C      etc....(Deze moet dus over de hele lengte kunnen uitstrekken)

of:

code:

Tab Name 1      Tab Name 2 (hover)      Tab Name 3
Sub Cat 2A      Sub Cat 2B      Sub Cat 2C      etc....(Deze moet dus over de hele lengte kunnen uitstrekken)

Wat er fout gaat is dat ze niet uitstrekken over de hele lengte, maar alleen over de lengte van Tab Name (nummer). Voorbeeld:

code:

Tab Name 1 (hover)      Tab Name 2      Tab Name 3
Sub Cat 1A  Sub Cat 1B      
Sub Cat 1C

Nou is het me ondertussen gelukt om in Opera en Firefox het werkend te krijgen door met negatieve marges te werken:

Cascading Stylesheet:

#first  {   margin-right:-500px;    }
#second {   margin-left:-250px; margin-right:-250px; }
#third  {   margin-left:-500px;     }

Helaas wil IE7 hier niet aan. Dus blijf ik met mijn probleem zitten voorlopig.

Ten overvloede, screenshots met de muis op tab 1.

Wat dus niet de bedoeling is (IE7):



En hoe ik het wel wil (ff2 en opera):

[ Voor 0% gewijzigd door Kiphaas7 op 21-07-2007 20:23 . Reden: typo ]

[Kiphaas7]

Damn, kon dat even makkelijker.

HTML:

<body>
<ul id="Menu">

    <li>Main tab 1
        <ul class="subMenu">
            <li><a href="#">Sub tab link 1</a></li>
            <li><a href="#">Sub tab link 2</a></li>
            <li><a href="#">Sub tab link 3</a></li>
            <li><a href="#">Sub tab link 4</a></li>
        </ul>
    </li>
        
    <li id="active">Main tab 2
        <ul class="subMenu">
            <li><a href="#">Sub tab link 1</a></li>
            <li><a href="#">Sub tab link 2</a></li>
            <li><a href="#">Sub tab link 3</a></li>
        </ul>
    </li>
    
</ul>
</body>

Cascading Stylesheet:

body {
    margin:0;
    padding:0;
}

ul {
    margin:0;
    padding:0;
}

#Menu {
    text-align: left;
    margin: 0;
    padding: 0;
    float: left;
    width: 400px;
    height:50px;
    background-color:red;
}
#Menu li {
    margin: 0;
    display: inline;
}

.subMenu {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

ul li ul {
    display:none;
    margin: 0;
    padding: 0;
}

ul li:hover ul {
    display:block;
}

#Menu .subMenu li {
    margin: 0;
    padding: 0;
}
#Menu .subMenu li a {
    background-color: orange;
}
#Menu .subMenu li a:hover {
    background: yellow;
}

Op naar IE6. . In ieder geval is dit probleem opgelost.

[Fuzzillogic]

Voor IE6 kun je gewoon Dean Edwards' IE7 script gebruiken. Dan kun je teminste ook gewoon CSS2 selectors gebruiken

[Kiphaas7]

Fuzzillogic schreef op zaterdag 21 juli 2007 @ 23:35:
Voor IE6 kun je gewoon Dean Edwards' IE7 script gebruiken. Dan kun je teminste ook gewoon CSS2 selectors gebruiken

Hmm, dat script weegt 81kB.... Vind ik vrij veel, voor iets wat ik ook met een behavior of conditional commented javascript kan oplossen. Ik denk als ik klaar ben met IE6 wel dik onder de 81 kb extra uitkom.

Javascript: hoe minder hoe liever naar mijn mening...

Stom, te snel gelezen, alles staat in modules, en de standaard module is maar 25kB groot

Fantastisch dat zo'n man al die problemen gaat oplossen, petje af hoor!

(En bedankt voor de link, interessant leesvoer )

[ Voor 6% gewijzigd door Kiphaas7 op 22-07-2007 02:22 ]

[Fuzzillogic]

Dat script includen is zo ongeveer het eerste wat ik doe ja Voor een antieke browser als IE6 ga ik zo min mogelijk moeite doen; mensen moeten maar eens upgraden naar een moderne browser of IE7.