home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het css-menu

Met alleen maar CSS zet je dit verticale accordion-menu op het beeldscherm. De css heb ik hieronder neer gezet.

<style type="text/css">
	.accordion-menu{
		margin-left:100px;
		position:absolute}
	.accordion-menu>ul{
		margin:0;
		padding:0;
		list-style:none;
		width:300px}
	.accordion-menu>ul>li{
		display:block;
		overflow:hidden;
		margin:0;
		padding:0;
		list-style:none;
		height:40px;
		width:300px;
		transition:height 0.3s ease-in-out;
		-moz-transition:height 0.3s ease-in-out;
		-webkit-transition:height 0.3s ease-in-out;
		-o-transition:height 0.3s ease-in-out}
	.accordion-menu>ul>li>h3{
		display:block;
		margin:0;
		padding:10px;
		height:19px;
		font-size:14px;
		border-top:#060 1px solid;
		font-family:Arial, Helvetica, sans-serif;
		text-decoration:none;
		text-transform:uppercase;
		color:#000;
		background:inherit;
		background:-moz-linear-gradient(top,#999999,#cccccc);
		background:-webkit-gradient(linear,left top, left bottom,from(#999999),to(#cccccc));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999,endColorstr=#ffcccccc);
		-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999,endColorstr=#ffcccccc)"}
	.accordion-menu>ul>li>div{
		background:#dfd;
		margin:0;
		overflow:auto;
		padding:10px;
		height:320px}
	.accordion-menu>ul>li:hover{
		height:320px}
	.accordion-menu:hover>ul>li:hover>h3{
		color:#fff;
		background:#000000;
		background:-moz-linear-gradient(top,#454545,#000000);
		background:-webkit-gradient(linear,left top,left bottom,from(#454545),to(#000000)); 
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545,endColorstr=#ff000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545,endColorstr=#ff000000)"}
	.accordion-menu>ul>li>h3:hover{
		cursor:pointer}
</style>		
		
		
		

En in de body-sectie van de pagina zet je de hieronderstaande "div", die je natuurlijk kan uitbreiden zoals je maar wilt.

<div class="accordion-menu">
	<ul>
		<li>
			<h3>verticaal accordion 1</h3>
			<div>plaats hier tekst</div>
		</li>
		<li>
			<h3>verticaal accordion 2</h3>
			<div>of wat je dan ook maar wilt</div>
		</li>
		<li>
			<h3>verticaal accordion  3</h3>
			<div>voor de div maakt het niets uit</div>
		</li>
	</ul>
</div>

		

Om in moderne browsers een soepel schuif-effect te krijgen zijn alle CSS3-trucs uit de kast gehaald. Dit houdt vanzelfsprekend in dat de css van geen kant meer valideert. Maar voor de browsers maakt het allemaal niets uit... Als je een valideer-purist bent kan je de extra css natuurlijk weghalen. Voor de rest valideert de pagina op html5.

cache 27-12-2010