Nodig: Microsoft Internet Explorer.
Mozilla Firefox kan met de voorbeelden hieronder totaal niet overweg.

 

De hover-functie (CSS) - deel 3

'Hoveren' en navigatie-menu's is bijna synoniem. Overal kom je dit soort menu's - zoals hieronder - op het internet tegen. Meestal wordt voor het mouseover-effect javascript gebruikt. Mijn voorkeur gaat echter uit naar CSS omdat het veel sneller werkt dan javascript.

Voor onderstaand CSS menu

Allerlei Fonts Links

heb ik met Paint Shop Pro 2 plaatjes gemaakt:

Dit is de code voor bovenstaand menu:

TUSSEN DE STYLE TAGS: <!-- lila-turquoise menu --> a.tutorial, a:visited.tutorial{ background-image:url(image1.jpg); width:130px; display:block; border-style:solid; border-width:1px; border-color:#000; padding-top:5px; padding-bottom:5px; margin-top:4px; margin-bottom:4px; text-align:center; text-decoration:none; font-family:"verdana", "arial"; color:#FFF; font-size:14px; font-weight: bold; } a:hover.tutorial{ background-image:url(image2.jpg); width:130px; display:block; border-style:solid; border-width:1px; border-color:mediumorchid ; padding-top:5px; padding-bottom:5px; margin-top:4px; margin-bottom:4px; text-align:center; text-decoration:none; font-family:"verdana", "arial"; color:purple; font-size:14px; font-weight:normal; } DE HTML-CODE: <div> <a href="../allerlei/allerlei.html" class="tutorial">Allerlei</a> <a href="../fonts/fonts.html" class="tutorial">Fonts</a> <a href="../links/links.html" class="tutorial">Links</a> </div>

* * *

Voor het CSS menu hieronder hoeven geen plaatjes gemaakt te worden. De kleurcodes voor de twee achtergrondkleuren zitten in het script. Als je met de muis over de donkerblauwe achtergrondkleur gaat, verandert de achtergrond in een lichtere kleur blauw.

• Boter
• Kaas
• Eieren
• Melk
• Fruit

De code:

TUSSEN DE STYLE TAGS: #navcontainer ul { margin: 0; padding: 0; list-style-type: none; } #navcontainer a { display: block; color: #FFF; background-color: #036; width: 9em; padding: .2em .8em; text-decoration: none; } #navcontainer a:hover { background-color: #369; color: #FFF; } DE HTML-CODE: <div id="navcontainer"> <ul> <li><a href="#">Boter</a></li> <li><a href="#">Kaas</a></li> <li><a href="#">Eieren</a></li> <li><a href="#">Melk</a></li> <li><a href="#">Fruit</a></li> </ul> </div>

* * *

Toch kan ik het niet laten dit fantastische menu te tonen. Het is niet zo simpel als de menu's hierboven want het zit boordevol CSS en javascript. Het mooie van dit menu is dat het gebruik maakt van de IE transitions/overgangen. Maar een nadeel is weer dat deze transitions alleen maar werken in de Internet Explorer. Die zie je niet in andere browsers. Wel blijft in andere browsers het hover-effect intact.

 Generator Index  Click & Go  Click & Go Plus  Email Scrambler  HTML 2 JS  HTML Writer  Lorem Ipsum  Meta Tags  Privacy Creator  Random Number  RSS Headliner  Valid Scroll  Window Generator
 

Als je meer wilt weten over dit menu, neem dan een kijkje bij WebDevTips.

Uitgebreide informatie over Internet Explorer overgangen en filters is te vinden bij Microsoft's MSDN library.

---

Zie ook deel 1 en deel 2

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal