[CSS] Verticaal menu met submenu op vaste positie mogelijk?

vrijdag 25 februari 2011 10:34

Acties:

0 Henk 'm!

Desperados!

Topicstarter

Ik ben een nieuwe website aan het maken waarbij ik de navigatie via een verticaal menu wil laten lopen.

Nou zijn er 100-en voorbeelden te vinden maar die doen bijna allemaal hetzelfde: het sub menu wordt als een flyout weergegeven naast het hoofdmenu-item.

Wat ik (eigenlijk de ontwerper) wil is het onderstaande bereiken:
Afbeeldingslocatie: http://www.rietvink-architecten.nl/meuk/menu.jpg

Afbeeldingslocatie: http://www.rietvink-architecten.nl/meuk/menu.jpg

Links staan de 4 hoofd menu items en de submenu items dienen er keurig naast te komen staan.

Ik heb het gevoel dat ik met position absolute en relative e.e.a. zou moeten kunnen bereiken maar mijn CSS kennis is nog in ontwikkeling.

Het instellen van de juiste kleuren en opmaak in CSS is geen probleem...maar het positioneren van het submenu wil niet lukken. Kan iemand me op weg helpen?

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 11:04

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Alle kinderen van een element dat een position absolute of relative heeft, kun je absolute positioneren vanaf de linker bovenhoek van dat element.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 25 februari 2011 11:53

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Ik snap het nog niet goed.

Ik zou het logisch vinden dat de container waar het submenu (dus menu-links ul ul) in zit absoluut geplaatst wordt. Dit heb ik aangeven maar de verticale plaatsing blijft relatief t.o.v. de ouder.

Hoe komt dit?

Stukje van mijn code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
</head>
<body>
<style type="text/css">
/*het navigatie menu links (in de container) */
#menu-links { 
                        width:450px;             /*breedte menu (3 x 150 px) */
                        font-size:16px;      /*tekst hoogte voor menu en submenu items */
                        line-height:200%;    /*regel afstand 200% */
                        font-family: Arial, Verdana, sans-serif;
                        color: #878686;                     
}

#menu-links ul {
                        margin:0px; 
                        padding:0px;
}

#menu-links ul li {
                        list-style:none;
                        cursor:pointer;
}

#menu-links ul li:hover {
                    color: #FF5000;  /* oranje */
                    font-weight: bold; 
                    position:relative;}

#menu-links ul li:hover ul {display:block;}

#menu-links ul ul {
                        display:none;
                        position:absolute;
                        left:150px;
                        top:0px;
}  

#menu-links ul ul li {
                        border:none; 
                        width:150px; 
                        float:left;
                        position: relative;
                        top: 0px; 
                        display:inline;
}

</style>
    
    <!-- Het navigatiemenu links --> 
    <div id="menu-links">
        <ul>
            <li>typologie
                      <ul>
                <li>Woningbouw</li>
                <li>Cultuur</li>
                <li>Retail</li>
                 </ul>
            </li>
            <li>locatie
                  <ul>
            <li>Hoorn</li>
            <li>Amsterdam</li>
            <li>Edam</li>
                    </ul>
            </li>
        </ul>
  </div>


</body>
</html>

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 11:56

Acties:

0 Henk 'm!

Deef_K

Kijk hier eens naar http://www.cssplay.co.uk/menus/flyout2.html

vrijdag 25 februari 2011 11:58

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Maar dat is juist wat ik niet wil. Het submenu dient absoluut t.o.v. de pagina geplaatst te worden. Niet t.o.v. het menu item.

Aanvulling:

Ik heb het nu voor elkaar door de container van het submenu een fixed position te geven. Het werkt wel maar ik heb het gevoel dat dit niet de juiste weg is.

Iemand?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
</head>
<body>
<style type="text/css">
/*het navigatie menu links (in de container) */
#menu-links { 
                        width:450px;             /*breedte menu (3 x 150 px) */
                        font-size:16px;      /*tekst hoogte voor menu en submenu items */
                        line-height:200%;    /*regel afstand 200% */
                        font-family: Arial, Verdana, sans-serif;
                        color: #878686;
                        height: 500px;
                        
}

#menu-links ul {
                        margin:0px; 
                        padding:0px;
                        top: 10px;
                        left:10px;
}

#menu-links ul li {
                        list-style:none;
                        cursor:pointer;
}

#menu-links ul li:hover {
                    color: #FF5000;  /* oranje */
                    font-weight: bold; 
}


#menu-links ul ul {
                        display:none;
                        position:fixed;      /* <----------------------- Deze op fixed en het werkt! */
                        left:150px;
                        top:10px;
                        height: 500px;
                        position: absolute;
                        color: #878686;
}
  
#menu-links ul li:hover ul {display:block;}

</style>
    
    <!-- Het navigatiemenu links --> 
    <div id="menu-links">
        <ul>
            <li>typologie
                      <ul>
                <li>Woningbouw</li>
                <li>Cultuur</li>
                <li>Retail</li>
                 </ul>
            </li>
            <li>locatie
                  <ul>
            <li>Hoorn</li>
            <li>Amsterdam</li>
            <li>Edam</li>
                    </ul>
            </li>
        </ul>
  </div>


</body>
</html>

[ Voor 86% gewijzigd door MrDry op 25-02-2011 12:42 ]

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 12:40

Acties:

0 Henk 'm!

Deef_K

Dit is het nodig knip, plak en verbouw werk en zeg ook niet dat het helemaal klopt maar misschien geeft het je een indruk hoe het werkt.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<style type="text/css">

#menuContainer {
    position:relative;
}
#verticalNav {
    position:absolute;
    margin:0;
    list-style:none;
    position:relative;
    font-family: Arial, Verdana, sans-serif;
    font-size: 16px;
    float:left;
    padding:0;
}
#verticalNav ul.toplevel {
    padding:0;
    margin:0;
    list-style:none;
}
#verticalNav ul.sub {
    padding:0;
    margin:0;
    list-style:none;
}
#verticalNav table {
    border-collapse:collapse;
    margin:-1px;
}
#verticalNav ul.toplevel ul.sub {
    position:absolute;
    left:-9999px;
    width:173px;
}
#verticalNav ul.toplevel {
    width:175px;
}
#verticalNav ul.toplevel li {
    float:left;
    width:175px;
}
#verticalNav ul.toplevel li a {
    display:block;
    width:150px;
    padding-left:10px;
    height:50px;
    line-height:50px;
    text-decoration:none;
    color:#000;
    font-size:16px;
}
#verticalNav a:hover {
    white-space:nowrap;
}
#verticalNav :hover ul.toplevel li a {
    color:#000;
}
}
#verticalNav ul.toplevel li a:hover {
    color:#FF5000;
}
#verticalNav ul.toplevel li:hover > a {
    color:#FF5000;
}
#verticalNav :hover ul.toplevel :hover ul.sub {
    left:150px;
    top:0;
}
#verticalNav :hover ul.toplevel :hover ul.pos {
    top: 0px;
}
#verticalNav :hover ul.toplevel :hover ul.sub li a {
    color:#000;
}
#verticalNav :hover ul.toplevel :hover ul.sub li a.sub2 {
    color:#000;
}
#verticalNav :hover ul.toplevel :hover ul.sub li a:hover {
    color:#FF5000;
}
#verticalNav :hover ul.toplevel :hover ul.sub li a.sub2:hover {
    color:#FF5000;
}
#verticalNav :hover ul.toplevel :hover ul.sub li:hover > a.sub2 {
    color:#FF5000;
}
</style>

<div id="menuContainer">
    <ul id="verticalNav">
        <li>
            <ul class="toplevel">
                <li><a href="#url">Typologie</a>
                    <ul class="sub pos">
                        <li><a class="sub2" href="#url">Woningbouw</a></li>
                        <li><a class="sub2" href="#url">Retail</a></li>
                    </ul>
                </li>
                <li><a href="#url">In voorbereiding</a>
                    <ul class="sub pos">
                        <li><a href="#url">Hoorn</a></li>
                        <li><a class="sub2" href="#url">Edam</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

vrijdag 25 februari 2011 12:42

Acties:

0 Henk 'm!

Raymond P

Om te beginnen zal je wel een anchor om je li moeten wrappen om het werkend te krijgen in IE, want volgens mij ondersteunt IE een li:hover niet.

Je CSS lijkt voor mij op spaghetti, logisch dat je er zo niet uit komt.
Ik heb een aantal regels verwijderd die volgens mij overbodig waren, vervolgens op het element dat je daadwerkelijk wilt positioneren de regels meegegeven.

Let op, heb het alleen even werkend gemaakt. Zit in mijn ogen nog steeds wat bad practice in.
Zo heb je iig een indruk van hoe het zou kunnen werken.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
</head>
<body>
<style type="text/css">
/*het navigatie menu links (in de container) */
#menu-links { 
                        width:450px;               /*breedte menu (3 x 150 px) */
                        font-size:16px;         /*tekst hoogte voor menu en submenu items */
                        line-height:200%;     /*regel afstand 200% */
                        font-family: Arial, Verdana, sans-serif;
                        color: #878686;                        
}

#menu-links ul {
                        margin:0px; 
                        padding:0px;
}

#menu-links ul li {
                        list-style:none;
                        cursor:pointer;
}

#menu-links ul li:hover {
    color: #FF5000;  /* oranje */
    font-weight: bold; 
}

#menu-links ul li:hover ul{
    display:block;
}

#menu-links ul ul {
    display:none;
}  

#menu-links ul ul li {
    border:none; 
    width:150px; 
}

.subnav{
    position: absolute;
    top: 0px; 
    left:150px;
}

</style>
    
    <!-- Het navigatiemenu links --> 
<div id="menu-links">
    <ul>
        <li>typologie
            <ul class="subnav">
                <li>Woningbouw</li>
                <li>Cultuur</li>
                <li>Retail</li>
            </ul>
         </li>
        <li>locatie
            <ul class="subnav">
                <li>Hoorn</li>
                <li>Amsterdam</li>
                <li>Edam</li>
            </ul>
        </li>
    </ul>
  </div>
</body>
</html>

- knip -

vrijdag 25 februari 2011 12:47

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Een element met position:absolute; berekend zijn top, left, right & bottom aan de hand van de eerste parent met position absolute of relative. Is die er niet, dan wordt het automatisch vanuit de <body> gedaan.

Wil je <ul class="nav-sub"> binnen <ul class="nav"> positioneren vanuit de top/left/right/bottom van je browser, mogen geen van de elementen waar die <ul class="nav-sub"> in zit een position absolute of relative hebben.

Wil je een <ul class="nav-sub"> binnen <ul class="nav"> juist wel vanuit de top/left/right/bottom van die "nav" positioneren, dan moet deze dus wel een position absolute of relative hebben.

[ Voor 3% gewijzigd door OkkE op 25-02-2011 12:50 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 25 februari 2011 12:49

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Thnx. Dit is mn eerste experiment met CSS en Divjes.

De 'truc' zat hem dus in een eigen class voor het submenu.

Gebruik hier firefox. Zie net dat het in IE inderdaad niet werkt....lang leve google!

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 12:52

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

MrDry schreef op vrijdag 25 februari 2011 @ 12:49:
Gebruik hier firefox. Zie net dat het in IE inderdaad niet werkt....lang leve google!

Suckerfish geeft je denk ik wel een oplossing, mocht je er zelf niet uit komen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 25 februari 2011 14:34

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Ik krijg een paar dingen nog niet voor elkaar.

Ik zou de regelafstand in de 'subnav' op 200% willen hebben maar in het hoofdmenu op 400%. Als ik dit instel krijgt het submenu ook de regelafstand van het hoofdmenu.

Kan je het 'erven' voorkomen?

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 14:40

Acties:

0 Henk 'm!

Aganim

I have a cunning plan..

Kwestie van in de klasse 'subnav' line-height: 200% opnemen? Of denk ik nu even te makkelijk?

vrijdag 25 februari 2011 14:45

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Dat was ook mijn eerste gedachte. Daar gebeurt niets mee....

Dat werkt inderdaad bij de bovenstaande code maar bij de aangepaste code van suckerfish niet...

Voor mijn gevoel heeft het dus met inheritance van de class te maken.

Hieronder de aangepaste code om e.e.a. in IE ook te laten functioneren.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Suckerfish Dropdowns - Vertical</title>
    <style type="text/css">

    body {
        font-family: arial, helvetica, serif;
    }
    
    #nav, #nav ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
        float : left;
        width : 150px;
    }
    
    #nav li { /* all list items */
        float : left;
        margin-bottom : -1px;
        width: 11em;
        top: 10px;
        font-size:16px;         /*tekst hoogte voor menu en submenu items */
    line-height:400%;     /*regel afstand 400% */
    }
    
    #nav li ul { /* second-level lists */
        position : absolute;
        left: -999em;
        margin-left : 11.05em;
        margin-top : -1.35em;
        height : 500px;
        color : black;

    }

        
    #nav li a { /* de list items */
        width: 11em;
        w\idth : 10em;
        display : block;
        color: #878686;
        text-decoration : none;
        background-color : white;
        padding : 0 0.5em;
    }
    
.subnav{ /*de klasse voor de submenu's */
    position: absolute;
    top: 30px; 
    left:150px;
        line-height=100%;
}
    
    #nav li a:hover {
             color: #FF5000;  /* oranje */
             font-weight: bold;     }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
        left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
        left: auto;
    }
    
    #content {
        margin-left : 12em;
    }
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>


<body>


<ul id="nav">

    <li><a href="#">typologie</a>
        <ul class="subnav">
            <li><a href="#">stedenbouw</a>
            <li><a href="#">bedrijfsgebouwen</a>
            <li><a href="#">kantoren</a>
            <li><a href="#">cultuur</a>
            <li><a href="#">binnenstadprojecten</a>
            <li><a href="#">retail</a>
            <li><a href="#">onderwijs</a>
            <li><a href="#">particulier</a>
            <li><a href="#">woningbouw</a>
            <li><a href="#">interieur</a>

        </ul>
    </li>
    <li><a href="#">in voorbereiding</a></li>
  <li><a href="#">in uitvoering</a></li>
    <li><a href="#">locatie</a>
        <ul class="subnav">
            <li><a href="#">Alkmaar</a>
            <li><a href="#">Amsterdam</a>
            <li><a href="#">Assendelft</a>
            <li><a href="#">Broek in Waterland</a>
            <li><a href="#">Callantsoog</a>
            <li><a href="#">Castricum</a>
            <li><a href="#">Den Helder</a>
            <li><a href="#">Edam</a>
            <li><a href="#">Haarlem</a>
            <li><a href="#">Heerhugowaard</a>
            <li><a href="#">Heiloo</a>
            <li><a href="#">Hoorn</a>
            <li><a href="#">Julianadorp</a>
            <li><a href="#">Landsmeer</a>
            <li><a href="#">Limmen</a>
            <li><a href="#">Medemblik</a>
            <li><a href="#">Middenmeer</a>
            <li><a href="#">Monnickendam</a>
            <li><a href="#">Neck</a>
            <li><a href="#">Obdam</a>
            <li><a href="#">Oosthuizen</a>
            <li><a href="#">Purmerend</a>
            <li><a href="#">Schardam</a>
            <li><a href="#">Soest</a>
            <li><a href="#">van Ewijcksluis</a>
        </ul>
    </li>

</ul>


</body>
</html>

[ Voor 137% gewijzigd door MrDry op 25-02-2011 14:53 ]

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 15:31

Acties:

0 Henk 'm!

Raymond P

MrDry schreef op vrijdag 25 februari 2011 @ 14:45:
Voor mijn gevoel heeft het dus met inheritance van de class te maken.

Je gevoel klopt.
Aangezien je aangeeft dat dit je eerste CSS projectje is, is het misschien een idee om je styles niet in grote groepen te gooien. In ieder geval totdat je goed snapt wat voor effect de dingen hebben die je doet.

- knip -

vrijdag 25 februari 2011 15:54

Acties:

0 Henk 'm!

Aganim

I have a cunning plan..

Voor mijn gevoel heeft het dus met inheritance van de class te maken.

In tegenstelling tot Raymond P durf ik te beweren dat dit niet met inheritance te maken heeft. Wanneer de parent waarde a: x heeft, moet waarde a:y dat gewoon overschrijven op de child.

" line-height=100%;" gaat echter natuurlijk niet werken.

vrijdag 25 februari 2011 16:06

Acties:

0 Henk 'm!

MrDry

Desperados!

Topicstarter

Het is wel duidelijk dat mijn ervaring met HTML / CSS nog wat te wensen overlaat.

In veel andere talen werkt een '=' prima hoor!

Maar ook als ik line-height:100%; gebruik gebeurt er niets. Ook als ik bijvoorbeeld de kleur wijzig doet hij hier niets mee.... Heb toch het gevoel van Raymond P gelijk heeft maar ik heb nog niet door waarom....

Quod licet lovi, non licet bovi

vrijdag 25 februari 2011 16:28

Acties:

0 Henk 'm!

Aganim

I have a cunning plan..

Excuses, te snel geconcludeerd. Het probleem zit hem inderdaad in #nav li, als je het probleem met inheritance wilt voorkomen kan je !important meegeven. Voorbeeld:

.subnav li {
line-height: 100% !important;
}

Edit: dit is bij mijn weten echter geen "best practice". Er zal ongetwijfeld een betere oplossing zijn.

[ Voor 20% gewijzigd door Aganim op 25-02-2011 16:30 ]

vrijdag 25 februari 2011 22:25

Acties:

0 Henk 'm!

Klaasvaak

Dat komt omdat een selector met een 'id' een hogere specificiteit heeft, dan een selector met enkel een 'class'.
Door een selector met id en class te creeeren gaan we daar weer overheen.

#nav .subnav li {
line-height: 100%;
}

http://www.w3.org/TR/CSS2/cascade.html#cascade

vrijdag 25 februari 2011 23:09

Acties:

0 Henk 'm!

Aganim

I have a cunning plan..

Oef, typisch "doh" momentje..

Onderwerpen