Webmasters.BY

Главная Статьи Верстка сайтов Создаем "легкое" Sliding JavaScript меню
Создаем "легкое" Sliding JavaScript меню
Рейтинг пользователей: / 5
ХудшийЛучший 
12.09.2008 11:44


Это простой скрипт, создающий эффект скольжения, который позволяет добавить некоторую "изюминку" Вашей навигации. Используя CSS Вы можете легко настроить навигацию, чтобы она соответствовала Вашему дизайну. HTML-код  для меню будет довольно прост:

<div class="menu">
 <ul id="slider_menu">
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Graphic Design</a></li>
 <li><a href="#">HTML</a></li>
 <li value="1"><a href="#">User Interface</a></li>
 <li><a href="#">CSS</a></li>
 </ul>
 <div id="slide"></div>
 </div>

В приведенном выше коде выделенное меню по умолчанию определено аттрибутом value= "1" на соответствующем пункте списка. Теперь нужно не забыть подключить стили и js-скрипт, которые "весит" всего лишь 1kb !

<link rel="stylesheet" type="text/css" href="menu_style.css" />
<script type="text/javascript" language="javascript" src="menu_script.js"></script>
 

Все что теперь нужно это просто вызвать следующую функцию:

<script type="text/javascript">menuSlider.init('slider_menu','slide'); </script>
 

Первая переменная - это id нашего списка <ul id="slider_menu">, вторая переменная - id "скользящего" блока <div id="slide">. Этот скрипт был протестирован в IE6, IE7, FireFox, Opera и Safari.

Скачать скрипт

Источник

Добавить комментарий


Защитный код
Обновить

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter
Обновлено 13.09.2008 11:00
 

Трастлинк

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 34 гостей онлайн

Комментарии

Статистика





JoomlaWatch Stats 1.2.7 by Matej Koval
Webmasters.BY © 2008 - 2012