Динамичное меню
Давненько я уже не писал рецептов красивых и интересных веб-вкусностей.
Сегодня я опишу способ от Bedrich Rios, по созданию приятного и динамичного меню при помощи JavaScript библиотеки jQuery, которая очень быстро набирает свою популярность.
Возможно использовать jQuery для такого простого эффекта сильно неоправданно, но для тех кто уже использует эту библиотеку — очень пригодиться!
И так, начнем :-)
Создаем «каркас» нашего будущего меню:
<ul id="sliding-navigation">
<li class="sliding-element"><h3>Пример меню</h3></li>
<li class="sliding-element"><a href="#">Ссылка 1</a></li>
<li class="sliding-element"><a href="#">Ссылка 2</a></li>
<li class="sliding-element"><a href="#">Ссылка 3</a></li>
<li class="sliding-element"><a href="#">Ссылка 4</a></li>
<li class="sliding-element"><a href="#">Ссылка 5</a></li>
</ul> Подключаем все необходимые стили и библиотеки вставив следующий код между тегами <head></head>:
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script> Вот в принципе и все, меню уже готово.
Но для более опытных пользователей я более подробно разберу использование этого эффекта.
Эффект запускается при помощи этой функции:
slide(navigation_id, pad_out, pad_in, time, multiplier)
navigation_id — название блока, в котором данный эффект будет использоваться.
pad_out — основной отступ меню в состоянии покоя
pad_in — отступ при наведении на меню
time — время «выпрыгивания» меню при загрузке страницы
multiplier — извините, но так и не понял зачем эта переменная вообще нужна(буду благодарен если подскажите) :-)
Теперь, мне кажется, проблем возникнуть не должно.
Пока. До встречи! ;-)
Посмотреть пример использования
(Английский)
Давно ищу дерево для админки с возможностью перетаскивания элементов и сериализации на jQuery. Увы и это не то.
Если найду что-то подобное — обязательно напишу об этом в блоге! ;-)
В демках мутулсы такое же меню
Возможно вам подойдёт вот это –
конечно могу только догадываться конечно, но скорее всего это количество шагов (промежуточных состояний) при выпрыгивании. То есть допустим время выпрыгивания 1сек и если multiplier =5 то состояние меняется каждые 0.2 сек, а если 10 то каждую 0.1. То есть как бы количество кадров.
жуть сколько у меня в комменте слов-паразитов. =)
Круто! Интересная менюшка. Спасибо!
Все же я за mootools, с тех пор, как jQuery не смог выдать мне $(’#form’).css(’border’), в то время как mootools $(’form’).getStyle(’border’) выдал мне честные ‘1px solid #000000′
– собственно, вот оно на мутулзе сделано :)
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: «0″ }, timer);
Отсюда понятно, что параметр multiplier это скорость анимации.
Вот прочитал все написанное, а сам перед этим кое-что «отрыл», но в jQuery не очень, qoogl-ю лучше :) – хорошое красивое и очень практичное дерево…
Вопрос!? Кто знает, как его перестроить так чтобы в id-шники шли не попорядку (от 0 до n), а с применением парентов… Ой!.. То есть, так, чтобы можно было подключить БД для построения… Кстати, а как это сделать (где втиснуться в коде, в какой функции ?)…
Спасибо, очень нужно.
Удачи!
Люди помогите
очень долго делаю сайты и на пхп с мускулом и с перлом знаком – и очень редко вообще использовал подобные штуковины
но тут вдруг понадобилось – зашел сюда нашёл что нада вообщем всё круто красиво и т.д.
накачал кучу и сталкнулся с проблеммой с которой никогда дела не имел и даже понятия не имею как к ней подступиться даже
вообщем проблемма в том что когда себе ставлю скрипты вдруг браузер запрашивает разрешение на использование activex
а у вас в примерах не запрашивал
очень интерестно стало как вы это обошли
заранее спасибо – очень жду ответа
а всё =) проблемма отпала так-же как появилась – после того как на хост залил всё работает на ура =)
Можно поэтапно?! Куда что писать и вставлять..
С такой менюшкой на скриптах сталкиваюсь впервые
и досих пор не могу разобраться.. Помогите уж,
пожалуйста..