Просте меню з анімацією на MooTools
Сьогодні ми з вами навчимося робити меню з простою анімацією. Дану реалізацію я підглянув в статті Create a Simple Animated Navigation Menu using MooTools. Її автор використовує це меню в себе на блозі, в чому ви легко можете переконатися (дивіться зверху справа). Або ж клікайте на демонстраційний приклад для перегляду чи тут для завантаження. Щоб додати анімацію він використовує основи HTML, CSS і зовсім трохи MooTools.
По-перше, почнемо з HTML для нашого навігаційного меню:
<ul class="tab">
<li><a class="nav" href="">Item 1</a></li>
<li><a class="nav" href="">Item 2</a></li>
<li><a class="nav" href="">Item 3</a></li>
<li><a class="nav" href="">Item 4</a></li>
</ul>
А так виглядає запропонований ним CSS:
// оформляємо меню
.tab {
float: right;
margin: 0;
padding: 0;
}
.tab li {
float: left;
width: auto;
margin-left: 5px;
text-align: center;
background: #ff9900;
color: #fff;
}
.tab li a {
display: block;
padding: 10px;
}
// оформляємо лінки
a.nav {
color: #fff;
text-decoration: none;
border-bottom: 0;
}
a.nav:visited {
color: #fff;
text-decoration: none;
border-bottom: 0;
}
a.nav:hover {
background: #111;
border-bottom: 0;
}
a.nav:active {
background: #111;
border-bottom: 0;
}
На черзі JavaScript код. Для початку слід підключити фреймворк MooTools. Також необхідно включити JavaScript файл "myscript.js", який буде містити код для анімації. Для цього пропишіть наступний код в шапці документу, тобто в тілі тегу head.
<script type="text/javascript" src="mootools-1.2.2-core-yc.js"></script>
<script type="text/javascript" src="myscript.js"></script>JavaScript код (файл myscript.js) для анімації виглядає наступним чином:
window.addEvent('domready', function() {
$$('.tab li a').each(function(el) {
var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
el.addEvents({
'mouseenter': function() { fx.start({
'padding-bottom': 30,
'background-color' : '#111'
});
},
'mouseleave': function() { fx.start({
'padding-bottom': 10,
'background-color' : '#FF9900'
});
}
});
});
});Також до теми раджу подивитися на статтю Олексія Ільїна Меню с выпадающими кнопками на Mootools. У цій статті він показує як зробити меню з кнопками, що випадають.