Ezúttal egy linkdobozt készítünk, ami akár menüként is használható.

A működő kódot ide kattintva tudod megnézni.

A dobozból többet is elhelyezhetünk egymás alá, ugyanúgy működni fognak.

HTML forráskód


	<ul class="menu">
		<li class="title">elso doboz</li>
		<li><a href="">elso almenupont</a></li>
		<li><a href="">masodik</a></li>
		<li><a href="">harmadik</a></li>
	</ul>

	<ul class="menu">
		<li class="title">masodik doboz</li>
		<li><a href="">elso almenupont</a></li>
		<li><a href="">masodik</a></li>
		<li><a href="">harmadik</a></li>
	</ul>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0;
	font: 98% georgia
}
body {
	background: url('bg.png') #577d5d;
	color: #fff;
	margin: 30px
}
ul.menu {
	width: 180px;
	padding: 0;
	margin: 0 auto 20px auto;
	list-style: none;
	box-shadow: 3px 3px 0 #516750;
	background: #f9d79d;
	background: -moz-linear-gradient(top,  #f9d79d 0%, #fccf7d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9d79d), color-stop(100%,#fccf7d));
	background: -webkit-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: -o-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: -ms-linear-gradient(top,  #f9d79d 0%,#fccf7d 100%);
	background: linear-gradient(to bottom,  #f9d79d 0%,#fccf7d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d79d', endColorstr='#fccf7d',GradientType=0 )
}

ul.menu li.title {
	padding: 5px 10px;
	color: #fff;
	font-size: 100%;
	font-family: trebuchet MS;
	text-shadow: 1px 1px 3px #b44c06;
	font-weight: bold;
	border-bottom: 1px solid #d0aa64;
	background: #ffaa60;
	background: -moz-linear-gradient(top,  #ffaa60 0%, #ff7800 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaa60), color-stop(100%,#ff7800));
	background: -webkit-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: -o-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: -ms-linear-gradient(top,  #ffaa60 0%,#ff7800 100%);
	background: linear-gradient(to bottom,  #ffaa60 0%,#ff7800 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaa60', endColorstr='#ff7800',GradientType=0 )
}
ul.menu a {
	padding: 5px 10px;
	display: block;
	color: #bf773f;
	text-decoration: none
}
ul.menu a:hover {
	border-left: 5px solid #f2b36b;
	background: #f2c574;
	color: #000
}

jQuery forráskód


$(document).ready(function() {

	// menu() fuggveny meghivasa a .menu class-al ellatott dobozra 200ms es 100ms sebessegekkel
	menu(".menu",200,100);
});

// a menu() fuggveny 3 parametert var:
// a menuhoz tartozo CSS class-t, illetve az animacio be es kifuto sebesseget
function menu(menuclass,overspeed,outspeed) {

	// az li-ken beluli a tagek hover effektje
	$("li a").hover(

		// over-nel 15-re noveljuk a bal padding-et az overspeed valtozoban meghatarozott sebesseggel
		function() { $(this).animate({ paddingLeft: 15 }, overspeed); },

		// out-nal visszaallitjuk 10-re az outspeed valtozoban meghatarozott sebesseggel
		function() { $(this).animate({ paddingLeft: 10 }, outspeed); }
	);
}