Dropdown menu JS + CSS - Softwareontwikkeling

donderdag 1 mei 2008 18:43

Acties:

Verwijderd

Topicstarter

Beste tweakers,

Ik krijg mijn dropdown menu maar niet goed. In IE zit hij wat naar rechts en in FF en Opera aan de linkerkant van de pagina. Ook zit hij te hoog. Ik krijg hem maar niet goed.

Hier staat een voorbeeldje:

http://rudolfbos.nl/projecten/schortinghuis/

Cascading Stylesheet:

#mainmenu {
    width: 980px;
    height: 26px;
    color: #fff;
    background: #774608;
}

#mainmenu ul { padding: 0; list-style: none; position: absolute; }
#mainmenu ul li { display: inline; float: left; }
#mainmenu ul li a { float: left; padding: 4px 30px; color: #fff;  }
#mainmenu ul li a:hover { background: #855110; border: 0; }

#mainmenu ul li ul {
    position: absolute;
    visibility: hidden;
    display: block;
    background: #fff;
    border-bottom: 2px solid #774608;
    opacity: .93;
    filter: alpha(opacity=93); 
    -moz-opacity: 0.93;
}

#mainmenu ul li ul li {
    display: block;
    float: none;
}

#mainmenu ul li ul li a {
    display: block;
    float: none;
    color: #000;
    text-decoration: none;
    width: 130px; 
    padding: 3px 0 4px 10px;
    border-bottom: 1px solid #774608;
    background: #fff;
}

#mainmenu ul li ul li a:hover {
    background: #774608;
    color: #fff;
    border-bottom: 1px solid #774608;
}

HTML:

<div id="mainmenu">
        <ul id="dropdown">
            <li><a href="#">Home</a></li>
            <li><a href="#">Restaurant</a>
                <ul>
                    <li><a href="#">Restaurant 1.1</a></li>
                    <li><a href="#">Restaurant 1.2</a></li>
                    <li><a href="#">Restaurant 1.3</a></li>
                    <li><a href="#">Restaurant 1.4</a></li>
                </ul>
            </li>
            <li><a href="#">Kegelbaan</a></li>
            <li><a href="#">Zalen</a></li>
            <li><a href="#">Catering</a>
                <ul>
                    <li><a href="#">Catering 1.1</a></li>
                    <li><a href="#">Catering 1.2</a></li>
                    <li><a href="#">Catering 1.3</a></li>
                    <li><a href="#">Catering 1.4</a></li>
                </ul>
            </li>  
            <li><a href="#">Informatie</a></li>
            <li><a href="#">Brochures</a></li>
        </ul>
    </div>

Als iemand een beter dropdown menu weet mag dat natuurlijk ook.

Alvast bedankt.

[ Voor 6% gewijzigd door Verwijderd op 01-05-2008 19:52 ]

donderdag 1 mei 2008 18:47

Acties:

Bozozo

Your ad here?

Google eens op Son of Suckerfish. Toch echt de beste manier om dit aan te pakken (al zit je er al dicht in de buurt).

edit: jouw probleem komt trouwens waarschijnlijk doordat je geen position: relative meegeeft aan de main ul. Daardoor plakken absolute elementen niet tegen de bovenkant van die ul, maar tegen de bovenkant van het scherm.

[ Voor 48% gewijzigd door Bozozo op 01-05-2008 18:48 ]

TabCinema : NiftySplit

donderdag 1 mei 2008 18:53

Acties:

Verwijderd

Topicstarter

Het werkt nu wel in Opera, in Firefox lijkt het dropdown menu onder de #content div te verdwijnen. De CSS is inmiddels geupdate. In IE schuift het dropdown menu naar rechts.

[ Voor 63% gewijzigd door Verwijderd op 01-05-2008 19:02 ]

donderdag 1 mei 2008 21:13

Acties:

Borizz

Verwijderd schreef op donderdag 01 mei 2008 @ 18:53:
Het werkt nu wel in Opera, in Firefox lijkt het dropdown menu onder de #content div te verdwijnen. De CSS is inmiddels geupdate. In IE schuift het dropdown menu naar rechts.

Dit lijkt niet alleen zo, dit is zo

. Je moet hiervoor met de z-index werken, omdat je #content element waarschijnlijk na je menu komt in de html code (waardoor deze standaard 'over' de bovenliggende elementen op hetzelfde niveau heenvalt).

Wat betreft de positie, je moet de ul t.o.v. de li waarin hij zit positioneren. Je gebruikt al position: absolute, maar nu moet je nog de goede waardes voor left, top (,bottom, right) vinden.

If I can't fix it, it ain't broken.

donderdag 1 mei 2008 21:22

Acties:

Verwijderd

Topicstarter

Je moet hiervoor met de z-index werken, omdat je #content element waarschijnlijk na je menu komt in de html code (waardoor deze standaard 'over' de bovenliggende elementen op hetzelfde niveau heenvalt).

Dat is natuurlijk onzin. Code die verderop staat valt altijd onder code die eerder in de HTML staat en niet andersom. Z-index helpt ook niet in dit geval.

Ook het positioneren met left en top heeft geen nut.

Toch bedankt voor je reactie

donderdag 1 mei 2008 22:34

Acties:

Verwijderd

Topicstarter

Ik heb het euvel gevonden. Ik had eerder in de css staan:

Cascading Stylesheet:

1	div { overflow: hidden; }

Het dropdown menu duikt nu iig niet meer onder de #content div. Echter, in IE staat het menu nog niet recht onder het menu item.

Iemand een idee hoe dit te fixen zonder externe stylesheet voor IE?

donderdag 1 mei 2008 22:49

Acties:

Verwijderd

Ik ben hier ook een tijdje (3 dagen) mee aan het klooien geweest.

CSS menu:

Cascading Stylesheet:

#nav{
    }

#nav, #nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
    }

#nav a{
    display: block;
    width: 120;
    height: 33;
    list-style: none;
    text-decoration: none;
    text-align: center;
    color: white;
    margin-top: -1;
    }

#nav li{
    float: left;
    padding: 0;
    width: 120;
    list-style: none;
    font-size: 155%;
    font-weight: bold;
    left: -999em;
    background: url(../images/site/menubalk.png);
    border : 1px solid black;
    display: inline-block;
    }

#nav li ul{
    position: absolute;
    padding: 0;
    width: 120;
    list-style: none;
    left: -999em;
    font-size: 60%;
    display: inline-block;
    }

#nav li:hover ul{
    left: auto;
    text-align: center; 
    }
    
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    text-align: center;
    }

#nav li:hover, #nav li.sfhover {
    background: url(../images/site/menubalk2.png);
    background-repeat: repeat;
    font-size: 25px;
    }

Menu zelf:

HTML:

<script language="javascript">
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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<table align= "center">
<td>
<ul id="nav">
    <li><a href="index.php">Home</a>
    </li>
    <li><a href="nieuws.php">Nieuws</a>
    </li>
    <li><a href="underconstruction.php">Soorten</a>
         <ul>
            <li><a href="underconstruction.php">Dionaea</a></li>
            <li><a href="underconstruction.php">Drosera</a></li>
            <li><a href="underconstruction.php">Pinguicula</a></li>
            <li><a href="soortsarra.php">Sarracenia</a></li>
         </ul>
    </li>
    <li><a href="kweeklijst.php">Kweeklijst</a>
    </li>
    <li><a href="foto.php">Foto's</a>
        <ul>
            <li><a href="fotodio.php">Dionaea</a></li>
            <li><a href="underconstruction.php">Drosera</a></li>
            <li><a href="fotoping.php">Pinguicula</a></li>
            <li><a href="fotosarra.php">Sarracenia</a></li>
            <li><a href="fotomoeras.php">Moeras</a></li>
        </ul>
    </li>
    <li><a href="underconstruction.php">Moeras</a>
    </li>
    <li><a href="links.php">Links</a>
    </li>
    <li><a href="contact.php">Contact</a>
    </li>
</ul>
</td>
</table>
</html>

donderdag 1 mei 2008 22:53

Acties:

Verwijderd

Topicstarter

Bedankt voor je post maar ik ben er net zelf uitgekomen! Moest heel wat doen met clears en overflows maar uiteindelijk is hij cross browser geworden!

donderdag 1 mei 2008 23:04

Acties:

Borizz

Verwijderd schreef op donderdag 01 mei 2008 @ 21:22:
[...]

Dat is natuurlijk onzin. Code die verderop staat valt altijd onder code die eerder in de HTML staat en niet andersom. Z-index helpt ook niet in dit geval.

Ook het positioneren met left en top heeft geen nut.

Toch bedankt voor je reactie

Weet je zeker dat dat onzin is..?? Lees dit eens dan.. z-index heeft hier wel degelijk nut (mits goed toegepast).

En voor je li elementen die een ul bevatten: position: relative, de ul's erin left: 0.. En kijk eens hoe mooi je menu geworden is..

If I can't fix it, it ain't broken.

donderdag 1 mei 2008 23:11

Acties:

marko77

het is zeker geen onzin, vooral in IE wil het nogal eens voorkomen dat elementen die later in de code staan altijd bovenop blijven staan omdat er ergens geen position is gedefinieerd.

Mijn rig

donderdag 1 mei 2008 23:11

Acties:

Fuzzillogic

Cool

Ik zie trouwens niet waarom je dit menu met javascript gemaakt heb. Voor zover ik kan zien is hier geen enkele reden voor, en kan het gewoon in CSS. Zijn alle pagina's überhaupt wel bereikbaar zonder JS?

donderdag 1 mei 2008 23:16

Acties:

Verwijderd

@fuzzillogic, hij heeft geen javascript gebruikt hoor. Ik wel, om oudere browsers te ondersteunen. Was nodig volgens Suckerfish.

donderdag 1 mei 2008 23:19

Acties:

Borizz

Fuzzillogic schreef op donderdag 01 mei 2008 @ 23:11:
Ik zie trouwens niet waarom je dit menu met javascript gemaakt heb. Voor zover ik kan zien is hier geen enkele reden voor, en kan het gewoon in CSS. Zijn alle pagina's überhaupt wel bereikbaar zonder JS?

En omdat het in CSS kan, moet je het ook maar in CSS doen? Waarom is dit beter dan in JS? CSS is bedoeld voor layout (style). Het is prima om javascript voor een menu te gebruiken (het is een behaviour).

En daarnaast kan je het prima zo maken dat de links in het menu zichtbaar zijn als js niet is ingeschakeld in de browser.

If I can't fix it, it ain't broken.

donderdag 1 mei 2008 23:27

Acties:

Verwijderd

@ Borizz zie mijn reactie, voor Fuzzillogic.

Verder @ Ruudchen, mooi dat het werkt.

donderdag 1 mei 2008 23:27

Acties:

Fuzzillogic

Cool

Verwijderd schreef op donderdag 01 mei 2008 @ 23:16:
@fuzzillogic, hij heeft geen javascript gebruikt hoor. Ik wel, om oudere browsers te ondersteunen. Was nodig volgens Suckerfish.

De voorbeeldsite van de TS werkt anders niet als ik JS uitzet.

Borizz schreef op donderdag 01 mei 2008 @ 23:19:
[...]

En omdat het in CSS kan, moet je het ook maar in CSS doen? Waarom is dit beter dan in JS? CSS is bedoeld voor layout (style). Het is prima om javascript voor een menu te gebruiken (het is een behaviour).

En daarnaast kan je het prima zo maken dat de links in het menu zichtbaar zijn als js niet is ingeschakeld in de browser.

Search engines gebruiken ook geen javascript. En javascript zou eigenlijk altijd unobtrusive moeten zijn. Zelf heb ik al bij veel sites javascript uitgeschakeld, omdat steeds meer figuren ten onrechte denken dat ik best wel wil wachten totdat de megabytes aan javascript-drek voor allerlei web2.0-fratsen die ik toch niet gebruik gedownload en verwerkt zijn. Op m'n mobiel heb ik voor die reden JS al gewoon uitgeschakeld. En ik ben niet de enige...

Persoonlijk vind ik een menu ook nog onder style vallen, en dus CSS. Nou kun je met javascript een gebruiksvriendelijker menu maken, maar niets staat je in de weg om CSS als fallback te gebruiken, en met javascript het menu te verbeteren.

Zoals het in de voorbeeldsite van TS staat is het menu ook met puur CSS te realiseren.

donderdag 1 mei 2008 23:50

Acties:

Verwijderd

Topicstarter

Het klopt inderdaad dat het ook met puur CSS kan. Ik ga me hier nog in verdiepen want vind dat wel wat netter. Wat wel handig met JS is, is een delay zodat je menu niet direct wegspringt als je er (per ongeluk) vanaf gaat met je muis.

Verder allemaal bedankt voor jullie reacties!

vrijdag 2 mei 2008 00:07

Acties:

Bozozo

Your ad here?

Ik spam mn eigen Suckerfish spinoff maar even:

Suckerfish met extra JS
Degrading demo van bovenstaand menu

ipv een fancy javascript animatie kun je ook standaard Suckerfish gebruiken natuurlijk (dwz alleen de hover psuedoclass faken).

[ Voor 18% gewijzigd door Bozozo op 02-05-2008 00:08 ]

TabCinema : NiftySplit

vrijdag 2 mei 2008 00:18

Acties:

Borizz

Fuzzillogic schreef op donderdag 01 mei 2008 @ 23:27:
[...]

De voorbeeldsite van de TS werkt anders niet als ik JS uitzet.

[...]

Search engines gebruiken ook geen javascript. En javascript zou eigenlijk altijd unobtrusive moeten zijn. Zelf heb ik al bij veel sites javascript uitgeschakeld, omdat steeds meer figuren ten onrechte denken dat ik best wel wil wachten totdat de megabytes aan javascript-drek voor allerlei web2.0-fratsen die ik toch niet gebruik gedownload en verwerkt zijn. Op m'n mobiel heb ik voor die reden JS al gewoon uitgeschakeld. En ik ben niet de enige...

Persoonlijk vind ik een menu ook nog onder style vallen, en dus CSS. Nou kun je met javascript een gebruiksvriendelijker menu maken, maar niets staat je in de weg om CSS als fallback te gebruiken, en met javascript het menu te verbeteren.

Zoals het in de voorbeeldsite van TS staat is het menu ook met puur CSS te realiseren.

Uhm ik heb toch nergens gezegd dat de JS voor een menu niet unobtrusive kan zijn? Een menu (met behaviour) is nu eenmaal een randgeval de een doet het puur in CSS de ander gebruikt er javascript voor. En een javascript voor een menu (1 a 2 KB als je het slim aanpakt) noem ik niet echt megabytes aan javascript.

Wat de beste oplossing is? Ik weet het niet en ik denk dat het ook afhangt van de omgeving en de doelgroep waarin de website het gebruikt wordt..

If I can't fix it, it ain't broken.

Pagina: 1

Reageer