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); }
);
}