CSS basis menu
een basis menu hoeft niet lelijk te zijn

home | index | menu | help

Er is geen CSS ondersteuning.


		
		
		

Een basis-menu behoort in alle browsers te werken. Zelfs in IE6 (of erger..). Maar dat wil nog niet zeggen dat een basis menu foei-lelijk hoeft te zijn. Om met de compatibiliteit te beginnen: Het menu wordt, ondanks dat het html5 is, geaccepteerd door alle browsers. Valideren geeft geen enkel probleem. En omdat alles, door en door, standaard is, is het menu bloed-snel. Je kan alle afmetingen, positie en kleurstellingen veranderen naar jouw eigen smaak. Hieronder staat de style-sheet (die je in de head-sectie moet plaatsen):



		<style type="text/css">
			.basismenu{font-size:18px;margin:0 0 0 100px;width:200px;border:8px solid #030;overflow:hidden;background:#003800;padding:20px}
			.basismenu ul{margin:0;color:#0ff;font-family:"Comic Sans MS",Arial,helvetica,sans-serif }
			.basismenu li a{color:#afa;background:inherit;padding-right:300px;text-decoration:none;font-weight:normal}
			.basismenu li a:hover{color:#000;background:#1a1;font-weight:bold}
			.basismenu li{white-space:nowrap;list-style:square inside;color:#060;font-weight:bold}
			.basismenu li:hover{color:#0a0}
		</style>
		

En hieronder staat de div met de paar regels code die je in de body-sectie kan zetten:



		<div class="basismenu">
			<ul>
				<li><a href="http://www.dns5.nl/css/basis-menu.html" rel="nofollow">home</a></li>
				<li><a href="http://www.dns5.nl/css/basis-menu.html" rel="nofollow">menu</a></li>
				<li><a href="http://www.dns5.nl/css/basis-menu.html" rel="nofollow">help</a></li>
			</ul>
		</div>
		

cache 02-09-2010