aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

[CSS] 3 lagen menu

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

[CSS] 3 lagen menu

Berichtdoor Stef » 22 maart 2008 14:21

Welke CSS guru kan mij verblijden met een mooie CSS 3 lagen menu, het moet uiteindelijk een mooi uitschuifmenu worden. Volledig lopend via een database, dus het is nogal ingewikkeld, maar diegene die met CSS het onderstaande idee voor elkaar kan krijgen, zou mij ontzettend helpen. :)

Code: Selecteer alles
---- laag 1 ---
      --- laag 2 --> --- laag 3 ---


Code: Selecteer alles
<ul id="parentlist">
   <li><a href="#homepage">Homepage</a></li>
   <li><a href="#zwembaden">Zwembaden</a>
      <ul id="childlist">
         <li><a href="#verlichting">Verlichting</a>
            <ul id="grandchildlist">
               <li><a href="#halogeen_verlichting">Halogeen verlichting</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#saunas">Sauna's</a></li>
   <li><a href="#whirlpools">Whirlpools</a></li>
   <li><a href="#waterproducten">Waterproducten</a></li>
   <li><a href="#contact">Contact</a></li>
</ul>
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: [CSS] 3 lagen menu

Berichtdoor frizzy » 23 maart 2008 08:34

Moet het een schuif 'effectje' hebben? Dus met fade of zo, want dat kan niet (of lastig) met css.
http://www.sitemasters.be/tutorials/2/1 ... eudo_class
Voor de liefhebber ;)
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: [CSS] 3 lagen menu

Berichtdoor Stef » 23 maart 2008 09:51

Kijk aan! Ik ga er eens mee knutselen, maar 'fade' hoeft er niet in.. ik wil gewoon even de CSS ervan hebben, zodat ik de rest er zelf in kan bouwen. :P
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: [CSS] 3 lagen menu

Berichtdoor Stef » 23 maart 2008 14:28

Frizzy toplinkje!

Heb er deze code van gemaakt:
Code: Selecteer alles
/* parentlist */
ul#parentlist {
   width: 100%;
   overflow: hidden;
   height: 50px;
}

ul#parentlist li a {
   display: block;
       float: left;
       padding: 0 6px;
   color: #2E3192;
}

/* childlist */
ul#childlist {
   margin-top: 8px;
   background-color: #99CCFF;
   border: 4px solid white;
}

ul#childlist li {
}

ul#childlist li a {
   width: 130px;
}

/* grandchildlist */
ul#grandchildlist {
   background-color: #99CCFF;
   border: 4px solid white;
   border-top: 0;
}

ul#grandchildlist li a {
   width: 150px;
   float: none;
}

/* standaarden */
li {
   position: relative;
}

li:hover {
   z-index: 1;
   cursor: pointer;
}

ul ul {
   position: absolute;
   display: none;
   left: 100px;
   top: 15px;
}

ul ul ul {
   left: 120px;
   top: 0;
}

li:hover ul ul {
   display: none;
}

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


En het werk in Firefox perfect, morgen ga ik de rest tweaken. Hopelijk werkt het ook nog als er andere items erbij komen. :P
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51


Keer terug naar HTML, CSS, Javascript



cron