KOMPOOS.NL

css vertical accordion menu

home » css » text-effects » css-vertical-accordion-menu.html

sitemap

voorbeeld verticaal accordion menu

1. vertical
   een verticaal menu
2. accordion
   een accordion menu
3. menu
   cross browser menu
4. zonder
   zonder javascript
5. javascript
   zonder php
6. puur css
   alleen maar css

uitleg accordeon menu (vertical)

Plaats de stylesheet in de head-sectie van de pagina en de html-code in de body sectie. Omdat de procedure geen enkel script gebruikt wordt het geheel in zeer korte tijd in de browser "gezet". In het voorbeeld is nog een afbeelding toegevoegd, om te laten zien dat dit makkelijk te doen is. Pas de kleuren en afmetingen aan naar wens.

stylesheet accordeon menu

<style type="text/css">
	img{border:0}
	ol.accordeon{
		position:absolute;
		padding:0;
		list-style:none;
		color:#FFF6A7;
		background:#775F31}
	ol.accordeon li a{
		width:200px;
		display:block;
		color:#FFF6A7;
		background:inherit;
		text-decoration:none;
		padding:10px 10px 15px 40px;
		border-top:1px solid #ffbb00;
		border-bottom:1px solid #383504}
	ol.accordeon li a:hover{
		background:#775F31;
		color:#FFF6A7;
		border-top:1px solid #FF8900}
	ol.accordeon li span{
		display:none;
		margin-top:0.8em;
		color:inherit;
		background:#775F31}
	ol.accordeon li a:hover span{
		display:block;
		font-size:0.8em}
</style>

html code "verticale accordeon"

<ol class="accordeon">
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">vertical<span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />een verticaal menu</span></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">accordion<span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />een accordion menu</span></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">menu <span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />cross browser menu</span></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">zonder <span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />zonder javascript</span></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">javascript<span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />zonder php</span></a></li>
	<li><a href="http://kompoos.nl/css/text-effects/css-vertical-accordion-menu.html">puut css <span><img src="http://static.dns5.nl/accordion-menu.jpg"/><br />alleen maar css</span></a></li>
</ol>
<div style="clear:both;height:300px;"></div>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.