Ejder Yurdakul 2006

Hoofdpagina Blog Contact

Webfolio

Alanya.in: shopping, nightlife, va...

villavilla: villa, property, estat...

Tutorials

Naam:
E-mail:
Onderwerp:
Bericht:

Simpel CSS Menu

Css menu's zijn heel SEO vriendelijk omdat er geen client side script moet worden geladen tijdens een bezoek op de website. Sommige DHTML en Javascript tags in uw website kunnen spider bots van verschillende zoekmotors blokkeren, een andere voordeel van CSS is, dat CSS standaard bij elke browser kan worden gelezen. Geen extra plugin, geen verloren bezoekers. Daarom wil ik hier de basis van een CSS Menu uitleggen voor mensen die nog niet veel van CSS kennen...

Ik wil met een voorbeeld beginnen, dit is een css menu in html code;

class bepaald eigenschappen van a (anchor). Dus wij moeten een class="cssmenu" bepalen in onze CSS.

a:link uw menu item als default
a:visited pagina's na minstens een click
a:hover uw link als de muis erop komt
a:active huidige pagina die open staat

Je kunt twee afbeeldingen gebruiken en die laten hoveren zonder javascript. Een afbeelding voor link, active en visited, een afbeelding voor hover zullen voldoende zijn. Ik verkies voor snelle simpele (qua bytesss) css menus, als er veel menu items moeten worden geladen. Hieronder zie je een voorbeeld code van een CSS Menu. Kopie onderstaande code, plak op een notepade en save as .html om te testen.

<html>
<head>
<title> Test Site </title>
<style>
a.cssmenu{color: white; display: block; height: 20px; width: 100px; font-size: 10px; padding: 3px; }
a.cssmenu:link, a.cssmenu:visited, a.cssmenu:hover
{background: red;}
a.cssmenu:hover
{background: blue;}
</style>
</head>
<body>
<a href="home.html" class="cssmenu">Menu item1</a>
<a href="link.html" class="cssmenu">Menu item2</a>
<a href="contact.html" class="cssmenu">Menu item3</a>
</body>
</html>