1. CSS
* {
padding: 0;
margin: 0;
}
#menu{
position: relative;
height: 30px;
background: #303030;
border-bottom: solid 3px #000;
margin-bottom: 10px;
z-index: 100;
}
#menu ul {
position: absolute;
left: 0;
top: 0;
list-style: none;
font-size: 16px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
float: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
background: #303030;
color: #fff;
text-decoration: none;
font-family: Georgia;
}
2. Подключение MooTools
<script type="text/javascript" src="mootools.js"></script>
Данный код размещаем в секции
Скачать MooTools можно здесь.
3. JavaScript
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#menu a').each(function(el) {
var fx = new Fx.Morph(el,{duration:700,transition:Fx.Transitions.Bounce.easeOut,link:'cancel'});
el.addEvents({
'mouseenter': function() {fx.start({'padding-top':30, 'background-color':'#000'});},
'mouseleave': function() {fx.start({'padding-top':0, 'background-color':'#F04F31'});}
});
});
});
</script>
Данный код также размещаем в
4. HTML
<div id="menu">
<ul>
<li><a href="" title="">Главная</a></li>
<li><a href="" title="">О нас</a></li>
<li><a href="" title="">Портфолио</a></li>
<li><a href="" title="">Контакты</a></li>
</ul>
</div>
