CSS dropdown menu - Softwareontwikkeling

vrijdag 10 november 2006 15:06

Acties:

Topicstarter

Hallo allemaal,

ik zit met het volgende. Ik heb van internet (ik geloof alistapart --> suckerfish) een dropdown script gehaald. Tot dusver prima en alles lijkt het goed te doen, maar nu wil ik dat in mijn menu de hoofdknoppen de breedte hebben van "auto" zodat deze niet te ver uit elkaar staan. De dropdown moet een vaste breedte hebben van 150px. Wanneer ik dit doe (zie code hieronder) komen de links naast elkaar te staan i.p.v. onder elkaar. Ik ben al enkele uurtjes mee aan het rommelen geweest en ook op internet is er nauwelijks iets over te vinden. Alvast bedankt!

HTML:

<html>
<head>

<style type="text/css">
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}
#nav a {
    display: block;
    width: auto;
}
#nav li { /* all list items */
    float: left;
    width: auto; /* width needed or else Opera goes nuts */
    padding: 5px;
}
#nav li ul { /* second-level lists */
    position: absolute;
    background: orange;
    width: 150px;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}
</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="#">Hoofdknop 1</a> 

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>

<li><a href="#">Hoofdknop 2</a> 
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>

<li><a href="#">Hoofdknop 3</a> 
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>

</ul>
</body>
</html>

vrijdag 10 november 2006 15:07

Acties:

Bram77

Heb je een link...?

vrijdag 10 november 2006 15:10

Acties:

DeepFreeze.NL

Topicstarter

Bram77 schreef op vrijdag 10 november 2006 @ 15:07:
Heb je een link...?

http://deepfreeze.stx.nl/test.html

vrijdag 10 november 2006 15:11

Acties:

Pkunk

Ik moet meteen denken aan dingen als: display:block, display:inline, float:left etc.. wat heb je daarmee al geprobeerd?

Hallo met Tim

vrijdag 10 november 2006 15:13

Acties:

DeepFreeze.NL

Topicstarter

Timlog schreef op vrijdag 10 november 2006 @ 15:11:
Ik moet meteen denken aan dingen als: display:block, display:inline, float:left etc.. wat heb je daarmee al geprobeerd?

Teveel verschillende combinaties....Teveel om op te noemen. Misschien dat ik net een foutieve combinatie heb gebruikt, maar met dit probleem ben ik al enkele dagen mee bezig dus ik kan het niet allemaal meer opnoemen.

vrijdag 10 november 2006 15:15

Acties:

Pkunk

DeepFreeze.NL schreef op vrijdag 10 november 2006 @ 15:13:
[...]

Teveel verschillende combinaties....Teveel om op te noemen. Misschien dat ik net een foutieve combinatie heb gebruikt, maar met dit probleem ben ik al enkele dagen mee bezig dus ik kan het niet allemaal meer opnoemen.

nou als je bijvoorbeeld de float:left weghaald bij #nav li, dan komen ze netjes onder elkaar.

Hallo met Tim

vrijdag 10 november 2006 15:16

Acties:

MTWZZ

One life, live it!

Vergelijk jouw code eens met die van mij: http://dev.barad-dur.nl/menu/horiz/ die is redelijk clean namelijk.

Nu met Land Rover Series 3 en Defender 90

vrijdag 10 november 2006 15:17

Acties:

DeepFreeze.NL

Topicstarter

Timlog schreef op vrijdag 10 november 2006 @ 15:15:
[...]

nou als je bijvoorbeeld de float:left weghaald bij #nav li, dan komen ze netjes onder elkaar.

Nee, dan krijg ik http://deepfreeze.stx.nl/test2.html

vrijdag 10 november 2006 15:18

Acties:

messi

En als je dit toevoegt aan je css:

code:

1
2
3

#nav li:hover ul a, #nav li.sfhover ul a {
    width: 150px;
}

Onze excuses voor het ontbreken van de ondertiteling.

vrijdag 10 november 2006 15:19

Acties:

DeepFreeze.NL

Topicstarter

MTWZZ schreef op vrijdag 10 november 2006 @ 15:16:
Vergelijk jouw code eens met die van mij: http://dev.barad-dur.nl/menu/horiz/ die is redelijk clean namelijk.

Ook jij hebt de hoofdkoppen een vaste breedte gegeven. Die van mij moeten auto worden zodat alles netjes naast elkaar komt te staan. Net wat de website van www.adobe.nl hebt zeg maar.

vrijdag 10 november 2006 15:21

Acties:

Pkunk

DeepFreeze.NL schreef op vrijdag 10 november 2006 @ 15:17:
[...]

Nee, dan krijg ik http://deepfreeze.stx.nl/test2.html

Welke browser gebruik jij dan? Want in opera, FF, en IE staan ze gewoon onderelkaar.

//edit oh lol ik zie het al, ze moeten juist niet onderelkaar. My bad.

[ Voor 12% gewijzigd door Pkunk op 10-11-2006 15:24 ]

Hallo met Tim

vrijdag 10 november 2006 15:21

Acties:

DeepFreeze.NL

Topicstarter

messi schreef op vrijdag 10 november 2006 @ 15:18:
En als je dit toevoegt aan je css:
code:
1
2
3
#nav li:hover ul a, #nav li.sfhover ul a {
    width: 150px;
}

Ja, perfect! je bent mijn held voor vandaag! $_/-\o_$ Dat ik daar nou zo lang mee aan het rommelen ben geweest

Voor diegene met hetzelfde probleem: http://deepfreeze.stx.nl/test.html

Dankje!!

[ Voor 9% gewijzigd door DeepFreeze.NL op 10-11-2006 15:22 ]