Анимированная навигация
Продолжаю цикл статей о разработанных мной плагинах. На этот раз рассмотрим плагин для анимации какого-либо меню или навигации. Это аналог fancy menu mootools но на jQuery.
Навигация с различными эффектами добавляет на ваш сайт немного динамики, что визуально выглядет очень красиво.
Но обойдемся без лишней риторики… представляю вам первый вариант:
Что нужно для работы плагина
Подключить JavaScript
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animationNav.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.animationNav.js"></script>
Где jquery.animationNav.js JS для навигации, а jquery.easing.1.3.js – плагин для добавления эффектов в анимацию
нициализировать скрипт
$(document).ready(function(){
$('ul').animationNav({
duration:1000,
addBG:'<li class="bg"><a href="#"><span> </span></a></li>',
bgClass :'bg',
animEffect: 'easeOutBack'
});
});
$('ul').animationNav({
duration:1000,
addBG:'<li class="bg"><a href="#"><span> </span></a></li>',
bgClass :'bg',
animEffect: 'easeOutBack'
});
});
Где указываются параметры
- duration – время выполнения анимации
- addBG – элементы добавляемые для background
- bgClass – название класса у добавляемого элемента
- animEffect – эффект навигации
HTML структура очень проста и не требуют никаких нюансов при верстке:
<ul>
<li class="active"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт навигации 2</a></li>
<li><a href="#">Динная надпись в навигации :)</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
<li class="active"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт навигации 2</a></li>
<li><a href="#">Динная надпись в навигации :)</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>
CSS требует определенных правил:
я опишу только необходимые параметры для корректного отображения и анимации, все остальное зависит от вашего воображения
ul.exemple1 {
position:relative;
}
ul.exemple1 li {
float:left;
position:relative;
z-index:1;
}
/* свойства элемента для bg */
ul.exemple1 li.bg {
position:absolute;
top:0;
left:0;
z-index:0;
}
position:relative;
}
ul.exemple1 li {
float:left;
position:relative;
z-index:1;
}
/* свойства элемента для bg */
ul.exemple1 li.bg {
position:absolute;
top:0;
left:0;
z-index:0;
}
Рассмотрим еще несколько примеров:
Пример с активным пунктом
Пример без активного пункта
Скачать примеры
9 Коментариев to Анимированная навигация
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Спасибо Леха. Прикольная чипуховина, надо будет где нибудь использовать. Напиши про видео ролики.
спасибо! очень красиво! нада будет где то прикрутить ;)
Спасибо! Мне очень пригодится=) Правда на модуля jooml’ы такие вещи насаживать мало приятного=(
Спасибо за плагин.
А есть возможность использовать его для меню с вложенной структурой? Чтобы эффект применялся только к главным пунктам.
Увы с данной реализацией этого плагина это не возможно.
Жаль. :) А есть еще какие-нибудь аналоги? Демо-пример fancy menu mootools у меня не работает.
и ещё…на юкоз можно ставить данное горизонтальное меню?
Я такого опыта не имею… конкретно сказать не могу.
Большое спасибо. Я как раз искал какую-нибудь менюшку для сайта…