css dropdown menuutje

zaterdag 7 augustus 2010 17:04

Acties:

0 Henk 'm!

Administrator

Topicstarter

Hello,

Ik ben even bezig geweest met een CSS dropdown menu. Ziet er leuk uit en werkt redelijk praktisch. Alleen is er één probleem: Internet Explorer 6

Helaas moet ik i.v.m. de doelgroep wel rekening houden met deze browser.

De oorzaak is eigenlijk redelijk simpel, IE6 ondersteunt :hover alleen maar op een a-tag en niet op een list of iets anders. Alleen de oplossing is een heel ander verhaal, ik kan zo eigenlijk niet bedenken hoe ik dit op ga lossen voor IE6. Zou iemand daar misschien mee kunnen helpen?

Het gaan om de volgende codes:

Cascading Stylesheet:

#navigatie ul { margin:0; padding:0; }
#navigatie a { text-decoration:none; }

/* navigatie - niveau 1 */
ul#navigatie { margin:0; padding:0; width:800px; height:40px; display:block; float:left; padding-left:200px; background:#242424; }
ul#navigatie li { position:relative; height:20px; display:block; float:left; }
ul#navigatie li a { font-weight:bold; color:#fff; padding:13px 40px 13px 0px; display:block; }
ul#navigatie li:hover a,
ul#navigatie li a:hover { background:#242424; }
/* navigatie - niveau 2 */
ul#navigatie li ul { position:absolute; top:30px; display:none; width:200px; z-index:2; }
ul#navigatie li:hover ul { display:block; margin-top:10px; }
ul#navigatie li ul li { clear:both; height:auto; width:100%; }
ul#navigatie li:hover ul li a,
ul#navigatie li ul li a { background:#646464; padding:10px; width:180px; display:block; color:#fff; font-weight:bold; }
ul#navigatie li ul li:hover a,
ul#navigatie li ul li a:hover { background:#242424 none; color:#ffa800; font-weight:bold; }

HTML:

    <ul id="navigatie">
            <li><a href="#" title="xx">HOME</a></li>
            <li><a href="#" title="xx">TITEL ENZ</a><ul>
            <li><a href="#">Ding</a></li> 
            <li><a href="#">Nummer 2/a></li> 
            <li><a href="#">etc</a></li> 
        </ul></li>
        
        <li><a href="#">TITEL</a><ul>
            <li><a href="#">menu</a></li> 
            <li><a href="#">ding 2</a></li> 
            <li><a href="#">ding 3</a></li> 
            <li><a href="#">etc</a></li> 
        </ul></li>
   
    </ul>

zaterdag 7 augustus 2010 17:11

Acties:

0 Henk 'm!

posttoast

Je kunt dit met javascript oplossen. Zet een class ".hover" op het element bij een mouseover, en in je stylesheet doe je dan:

Cascading Stylesheet:

1
2
3

.elementnaam:hover, .elementnaam.hover{
  background: red;
}

Zoek maar eens op SuckerFish Hover. Dit dus: http://htmldog.com/articles/suckerfish/hover/

Het is natuurlijk verre van elegant, maar welke IE6 hack is dat wel? Zeker als je dit stukje JS met een conditional comment in IE6 laadt is het best een prima oplossing. Zoiets dus:

HTML:

1	<!--[if lt IE 7]><script type="text/javascript" src="/media/js/ie6-fixes.js"></script><![endif]-->

[ Voor 42% gewijzigd door posttoast op 07-08-2010 17:12 ]

omniscale.nl

zaterdag 7 augustus 2010 17:22

Acties:

0 Henk 'm!

Saven

Administrator

Topicstarter

Nice

na veel geklooi werkt dat eindelijk met die suckerfish

thanks

zondag 8 augustus 2010 16:03

Acties:

0 Henk 'm!

Verwijderd

Of plaats dit op je website...

HTML:

<!-- 
Door: Maarten Hunink, Zinnebeeld
Versie: 1.0
Licentie: Creative Commons Naamsvermelding 3.0
Gebruik: Plaats code net onder de <body> tag.
-->

<!--[if lte IE 6]>
    <style type="text/css">
        #ie6_banner{
            background: #535353;
            width: 100%;
            position: relative;
            padding:15px 0;
            margin:0;
            border-bottom: 1px solid #111;
            z-index: 999;
        }
        #ie6_wrap{
            width: 1000px;
            margin: 0 auto;
        }
        #ie6_wrap h1{
            font-size: 18px;
            text-transform: none;
            color: #fff;
            background: none;
            margin: 0 0 10px 0;
            padding:0;
            font-weight: bold;
        }
        #ie6_wrap p{
            text-align: left;
            font-size: 12px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: normal;
            color: #fff;
            background: none;
            line-height: 16px;
            margin:0;
        }
        #ie6_wrap p a{
            color: #fff;
            background: none;
            text-decoration: underline;
            font-size: 12px;
        }
        #ie6_wrap p a:hover{
            color: #fff;
            background: none;
            text-decoration: none;
        }
        #ie6_links{
            float: right;
            width: 272px;
        }
        #ie6_links a{
            float: left;
            background: #5a5a5a;
            width: 85px;
            height: 27px;
            padding: 12px 0 0 50px;
            margin:0 1px 1px 0;
            color:#fff;
        }
        #ie6_links a:hover{
            text-decoration: underline;
        }
        #ie6_links img{
            position: absolute;
            margin: -5px 0 0 -35px;
            border:none;
        }
    </style>
    <div id="ie6_banner">
        <div id="ie6_wrap">
            <div id="ie6_links"><a href="http://www.mozilla.com/nl"><img src="http://www.wijstoppenook.nl/site/gfx/firefox_small.png" alt="" />Firefox</a><a href="http://www.google.com/chrome"><img src="http://www.wijstoppenook.nl/site/gfx/chrome_small.png" alt="" />Chrome</a><a href="http://www.apple.com/safari"><img src="http://www.wijstoppenook.nl/site/gfx/safari_small.png" alt="" />Safari</a><a href="http://www.opera.com"><img src="http://www.wijstoppenook.nl/site/gfx/opera_small.png" alt="" />Opera</a> </div>
            <h1>U gebruikt een oude versie van Internet Explorer</h1>
            <p>Helaas wordt Internet Explorer 6 niet meer volledig ondersteund op deze website. Wij raden u aan over te schakelen naar een modernere internetbrowser. U kunt natuurlijk kiezen voor <a href="http://www.microsoft.com/ie">Internet Explorer 8</a>. Beter nog kiest u een browser uit het overzicht hiernaast.<br /> Deze browsers zijn veelal sneller en veiliger en voldoen beter aan de webstandaarden.</p> 
        </div>
    </div>
<![endif]-->

zondag 8 augustus 2010 16:18

Acties:

0 Henk 'm!

posttoast

Ja, sympathiek. Zorg er even voor dat een flink grote groep mensen je site niet meer kan gebruiken (want navigatie klapt niet meer uit). Ik zie ook het liefst zo min mogelijk IE6 gebruikers, maar de realiteit is dat ze er wel zijn. Vaak niet uit eigen beweging, maar omdat dit van hogerhand zo geregeld is (voorbeeld: nieuws: Britse overheid: nieuwere browsers zijn niet veiliger dan IE6).

Natuurlijk zijn we inmiddels zo ver dat we niet meer 100% rekening hoeven te houden met dit fossiel. Maar wat mij betreft moet de site wel altijd werken, of toch in ieder geval de basisfunctionaliteiten (en de navigatie vind ik daar wel onder vallen). Dat een blokje geen ronde hoekjes of schaduwrandje heeft, of dat iets niet helemaal netjes uitlijnt vind ik een ander verhaal.

Kortom: prima om zo'n waarschuwingsbalkje erin te hangen, maar gebruik het niet als excuus om je hele site niet te laten functioneren. Zeker niet als het zo makkelijk opgelost kan worden als ik aangeef.

Sowieso geeft de TS aan dat hij in verband met zijn doelgroep rekening moet houden met IE6.

omniscale.nl

zondag 8 augustus 2010 16:42

Acties:

0 Henk 'm!

Verwijderd

posttoast heeft gelijk met het ding van de doelgroep, maar in dat balkje wordt ook geadviseerd om te upgraden. Een beetje internetgebruiker doet dat dan ook... In theorie. In praktijk moet ik je helaas gelijk geven (niet dat ik je dat gelijk niet gun).

zondag 8 augustus 2010 16:44

Acties:

0 Henk 'm!

WeeJeWel

http://code.google.com/p/ie7-js/

No more headaches

Homey — Critics are those without skills to create.

zondag 8 augustus 2010 17:12

Acties:

0 Henk 'm!

posttoast

Verwijderd schreef op zondag 08 augustus 2010 @ 16:42:
posttoast heeft gelijk met het ding van de doelgroep, maar in dat balkje wordt ook geadviseerd om te upgraden. Een beetje internetgebruiker doet dat dan ook... In theorie. In praktijk moet ik je helaas gelijk geven (niet dat ik je dat gelijk niet gun).

Ik zou willen dat ik geen gelijk had, zou mijn leven een stuk makkelijker maken in dit geval

WeeJeWel schreef op zondag 08 augustus 2010 @ 16:44:
http://code.google.com/p/ie7-js/

No more headaches

Je hebt wel meer van dit soort oplossingen. http://css3pie.com/ is er eentje waarmee ik nu aan het spelen ben. Ik probeer het alleen zo min mogelijk te gebruiken. Als je één eenvoudig oplosbaar probleem hebt (zoals de :hover uit de TS) is het gebruik van dit soort frameworks toch een beetje alsof je met een kanon op een mug aan het schieten bent. Het voelt een beetje hetzelfde als JQuery of MooTools inladen, als het enige dat je met javascript wilt doen een alertbox tonen is.

omniscale.nl

zondag 8 augustus 2010 17:34

Acties:

0 Henk 'm!

WeeJeWel

posttoast schreef op zondag 08 augustus 2010 @ 17:12:
[...]

Ik zou willen dat ik geen gelijk had, zou mijn leven een stuk makkelijker maken in dit geval

[...]

Je hebt wel meer van dit soort oplossingen. http://css3pie.com/ is er eentje waarmee ik nu aan het spelen ben. Ik probeer het alleen zo min mogelijk te gebruiken. Als je één eenvoudig oplosbaar probleem hebt (zoals de :hover uit de TS) is het gebruik van dit soort frameworks toch een beetje alsof je met een kanon op een mug aan het schieten bent. Het voelt een beetje hetzelfde als JQuery of MooTools inladen, als het enige dat je met javascript wilt doen een alertbox tonen is.

In dat geval is er http://www.xs4all.nl/~peterned/csshover.html.

Homey — Critics are those without skills to create.

Onderwerpen