KOMPOOS.NL

slide down menu - CSS

home » css » text-effects » slide-down-menu.html

sitemap

voorbeeld cross browser slide down menu

• Eerste

• Tweede
  • een slide down
  • menu met horizontale
  • tabs en geheel
  • cross browser
  • ook voor mobiel
• Sluiten

• Derde
  • cross browser
  • menu's werken
  • altijd en overal
• Sluiten

• Vierde
  • Je kan zelf
  • de CSS code
  • aanpassen
  • op alle mogelijke
  • manieren die
  • je maar wilt
• Sluiten

• Vijfde
  • Alleen minder
  • dan IE6 wordt niet
  • meer ondersteund
• Sluiten

• De laatste link

uitleg slide down procedure

Plaats de stylesheet in de head-sectie van jouw pagina, en de html-code in de body-sectie van de pagina. In broncode kan je de class "inline regels_x" vinden. De x staat voor het aantal elementen in de <li>. Dus als er vijf menu-elementen zijn vul je bij de class: class="inner regels_5" in. Er wordt overigens nog gesleuteld aan deze procedure, maar zoals hij hier staat is hij al uitstekend te gebruiken.

stylesheet van het slide-down menu

<style type="text/css">
	.slide_down{
		padding:0;
		margin:0;
		list-style:none;
		font-size:13px;
		height:40px;
		float:left;
		position:relative;
		z-index:100;
		margin-right:1px;
		margin-bottom:30px}
	.eerste{
		margin-left:30px}
	.slide_down li{float:left;
		position:relative}
	.slide_down li.sluiten{
		width:30px;
		height:40px;
		position:absolute;
		right:0;
		top:0;
		z-index:-1}
	.slide_down li.sluiten a{
		display:block;
		width:30px;
		height:40px;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAoBAMAAAAbPVchAAAAHlBMVEUAAAD////E1cS/0b+hv6F/pIBrlWxjj2RhjmNMb01Fdog+AAAAAXRSTlMAQObYZgAAAEFJREFUKJFj6EAGSQwMKPwOBTR+Ahq/GY3fyjAFVWCo8hsrUPmC4ij8RkHBCmS+oCBUAYQPlBYUHFD3k83voC8fAC25OR10zOa9AAAAAElFTkSuQmCC')}
	.slide_down li.sluiten a b{
		position:absolute;
		left:-9999px}
	.slide_down li a.lijst_top_a{
		text-decoration:none;
		white-space:nowrap;
		display:block;
		cursor:pointer;
		height:40px;
		line-height:40px;
		float:left;
		font-weight:normal;
		color:#fff;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAAGQBAMAAADFJUa0AAAALVBMVEUAAAD////x9fHw9PDZ49nE1cXE1cSnwKemv6ehv6F/pIB0m3VrlWxhjmNMb01UKt9kAAAAAXRSTlMAQObYZgAAAQdJREFUeJzt0LFNw2AUhdErIaUJDQNkhGySggEomAOJBVgEGu/gJuldWbL0D8AWuDCFqf8nFOl83WuOrl6Sj9a7r6xdurOt3ZJDAdvaax5L3DHnEnfOUOIu6SV9708ul8vdu9PTWoHbVvZU4U7b3O7/3eZ2d6dW4/7G5XLv0P0Tl8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul/sv7lDCLnkvceccS9wxDyXuc/JSwF6z9tad/Ux+ACenRehZKWWmAAAAAElFTkSuQmCC') no-repeat top left;
		padding-left:10px;
		padding-right:10px;
		padding-top:0;
		padding-bottom:0}
	.slide_down li div.pijltje{
		float:left;
		cursor:pointer;
		width:30px;
		height:40px;
		font-weight:normal;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAAGQBAMAAADFJUa0AAAALVBMVEUAAAD////x9fHw9PDZ49nE1cXE1cSnwKemv6ehv6F/pIB0m3VrlWxhjmNMb01UKt9kAAAAAXRSTlMAQObYZgAAAQdJREFUeJzt0LFNw2AUhdErIaUJDQNkhGySggEomAOJBVgEGu/gJuldWbL0D8AWuDCFqf8nFOl83WuOrl6Sj9a7r6xdurOt3ZJDAdvaax5L3DHnEnfOUOIu6SV9708ul8vdu9PTWoHbVvZU4U7b3O7/3eZ2d6dW4/7G5XLv0P0Tl8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul/sv7lDCLnkvceccS9wxDyXuc/JSwF6z9tad/Ux+ACenRehZKWWmAAAAAElFTkSuQmCC') no-repeat top right}
	.slide_down li.geen_sub a{
		padding:0 0 0 10px}
	.slide_down li.geen_sub b{
		display:block;
		width:10px;
		height:40px;
		float:left;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAAGQBAMAAADFJUa0AAAALVBMVEUAAAD////x9fHw9PDZ49nE1cXE1cSnwKemv6ehv6F/pIB0m3VrlWxhjmNMb01UKt9kAAAAAXRSTlMAQObYZgAAAQdJREFUeJzt0LFNw2AUhdErIaUJDQNkhGySggEomAOJBVgEGu/gJuldWbL0D8AWuDCFqf8nFOl83WuOrl6Sj9a7r6xdurOt3ZJDAdvaax5L3DHnEnfOUOIu6SV9708ul8vdu9PTWoHbVvZU4U7b3O7/3eZ2d6dW4/7G5XLv0P0Tl8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul/sv7lDCLnkvceccS9wxDyXuc/JSwF6z9tad/Ux+ACenRehZKWWmAAAAAElFTkSuQmCC') no-repeat top right}
	.slide_down div.inner{
		position:absolute;
		left:0;
		top:40px;
		height:0;
		width:174px;
		overflow:hidden;
		-webkit-transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
		-o-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out}
	.slide_down li div.pijltje:hover div.regels_1{height:32px;}
	.slide_down li div.pijltje:hover div.regels_2{height:52px;}
	.slide_down li div.pijltje:hover div.regels_3{height:72px;}
	.slide_down li div.pijltje:hover div.regels_4{height:92px;}
	.slide_down li div.pijltje:hover div.regels_5{height:112px;}
	.slide_down li div.pijltje:hover div.regels_6{height:132px;}
	.slide_down li div.pijltje:hover div ul{top:0;}
	/* IE6 */
	.slide_down table{
		border-collapse:collapse;
		padding:0;
		margin:0 -20px -1px 0;
		position:absolute;left:0; top:0}
	.slide_down li a.sub-a{display:block; float:left; width:30px; height:40px;} 
	.slide_down li a.sub-a:hover{direction:ltr;}
	.slide_down li a.sub-a:hover div.regels_1{height:32px;}
	.slide_down li a.sub-a:hover div.regels_2{height:52px;}
	.slide_down li a.sub-a:hover div.regels_3{height:72px;}
	.slide_down li a.sub-a:hover div.regels_4{height:92px;}
	.slide_down li a.sub-a:hover div.regels_5{height:112px;}
	.slide_down li a.sub-a:hover div.regels_6{height:132px;}
	.slide_down li a.sub-a:hover ul{top:0;}
	/* einde IE6  */
	.slide_down li ul{
		margin:0;
		background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAAGQBAMAAADFJUa0AAAALVBMVEUAAAD////x9fHw9PDZ49nE1cXE1cSnwKemv6ehv6F/pIB0m3VrlWxhjmNMb01UKt9kAAAAAXRSTlMAQObYZgAAAQdJREFUeJzt0LFNw2AUhdErIaUJDQNkhGySggEomAOJBVgEGu/gJuldWbL0D8AWuDCFqf8nFOl83WuOrl6Sj9a7r6xdurOt3ZJDAdvaax5L3DHnEnfOUOIu6SV9708ul8vdu9PTWoHbVvZU4U7b3O7/3eZ2d6dW4/7G5XLv0P0Tl8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul8vlcrlcLpfL5XK5XC6Xy+VyuVwul/sv7lDCLnkvceccS9wxDyXuc/JSwF6z9tad/Ux+ACenRehZKWWmAAAAAElFTkSuQmCC') no-repeat bottom left;
		width:0;
		position:absolute;
		width:170px;
		-webkit-transition: 0.4s ease-in-out;
		-moz-transition: 0.4s ease-in-out;
		-o-transition: 0.4s ease-in-out;
		transition: 0.4s ease-in-out; list-style-type:none; padding-left:2px; padding-right:2px; padding-top:2px; padding-bottom:10px}
	.slide_down li div.regels_1 ul{top:-32px;}
	.slide_down li div.regels_2 ul{top:-52px;}
	.slide_down li div.regels_3 ul{top:-72px;}
	.slide_down li div.regels_4 ul{top:-92px;}
	.slide_down li div.regels_5 ul{top:-112px;}
	.slide_down li div.regels_6 ul{top:-132px;}
	.slide_down li ul li{
		float:none;
		width:170px;
		margin:0;
		height:20px}
	.slide_down li ul li a{
		display:block;
		text-decoration:none;
		height:20px;
		line-height:20px;
		padding:0 5px;
		background-image:none;
		color:#fff;
		font-size:12px;
		width:160px}
	.slide_down li ul li a:hover{background:#618EA4;}
</style>
<style media="only screen and (max-device-width:768px)" type="text/css">
	.slide_down a.tik {display:block; width:30px; height:40px; margin-bottom:-40px;}
	.slide_down a.tik:hover + div.regels_1 {height:32px;}
	.slide_down a.tik:hover + div.regels_2 {height:52px;}
	.slide_down a.tik:hover + div.regels_3 {height:72px;}
	.slide_down a.tik:hover + div.regels_4 {height:92px;}
	.slide_down a.tik:hover + div.regels_5 {height:112px;}
	.slide_down a.tik:hover + div.regels_6 {height:132px;}
	.slide_down a.tik:hover + div ul {top:0;}
	.slide_down li.lijst_boven:hover + li.sluiten {z-index:100;}
</style>

html code voor het slide down menu

<ul class="slide_down eerste">
	<li class="geen_sub"><a class="lijst_top_a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Eerste</a><b></b></li>
</ul>
<ul class="slide_down">
	<li class="lijst_boven"><a class="lijst_top_a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Tweede</a>
	<div class="pijltje"><a class="tik" href="http://kompoos.nl/css/text-effects/slide-down-menu.html"></a>
	<div class="inner regels_5">
		<ul>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">een slide down</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">menu met horizontale</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">tabs en geheel</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">cross browser</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">ook voor mobiel</a></li>
		</ul>
	</div>
	</div>
	</li>
	<li class="sluiten"><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html"><b>Sluiten</b></a></li>
</ul>
<ul class="slide_down">
	<li class="lijst_boven"><a class="lijst_top_a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Derde</a>
	<div class="pijltje"><a class="tik" href="http://kompoos.nl/css/text-effects/slide-down-menu.html"></a>
	<!--[if lte IE 6]><a class="sub-a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html"><table><tr><td>
			<![endif]-->
	<div class="inner regels_3">
		<ul>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">cross browser</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">menu's werken</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">altijd en overal</a></li>
		</ul>
	</div>
	</div>
	</li>
	<li class="sluiten"><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html"><b>Sluiten</b></a></li>
</ul>
<ul class="slide_down">
	<li class="lijst_boven"><a class="lijst_top_a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Vierde</a>
	<div class="pijltje"><a class="tik" href="http://kompoos.nl/css/text-effects/slide-down-menu.html"></a>
	<div class="inner regels_6">
		<ul>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Je kan zelf</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">de CSS code</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">aanpassen</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">op alle mogelijke</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">manieren die</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">je maar wilt</a></li>
		</ul>
	</div>
	</div>
	</li>
	<li class="sluiten"><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html"><b>Sluiten</b></a></li>
</ul>
<ul class="slide_down">
	<li class="lijst_boven"><a class="lijst_top_a" href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Vijfde</a>
	<div class="pijltje"><a class="tik" href="http://kompoos.nl/css/text-effects/slide-down-menu.html"></a>
	<div class="inner regels_3">
		<ul>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">Alleen minder</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">dan IE6 wordt niet</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html">meer ondersteund</a></li>
		</ul>
	</div>
	</div>
	</li>
	<li class="sluiten"><a href="http://kompoos.nl/css/text-effects/slide-down-menu.html"><b>Sluiten</b></a></li>
</ul>
<div style="clear:both;"></div>

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