Хаки и Скрипты Next Generation CMS : Меню и навигация, Интерфейс, CSS, JS : Динамическое меню с скольжением цвета

irbees2008 Опубликовано - 14 - января Меню и навигация

Автор: htmldrive
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Динамическое меню с скольжением цвета , подходит для личного развлекательного блога или сайта.

1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , и заливаем в папку с шаблоном.
2.Подключаем стили и скрипты в хеад main.tpl

Код:

<link href="{tpl_url}/css/webwidget_menu_glide.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="{tpl_url}/js/webwidget_menu_glide.js"></script>

У кого не подключен jquery, подключите.
3.Само меню ,вставляем туда где оно должно быть у вас

Код:

<div id="webwidget_menu_glide" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
    <li><a href="https://ngcmshak.ru/">Home</a></li>
    <li><a href="https://ngcmshak.ru/">News</a></li>
    <li class="current"><a href="https://ngcmshak.ru/">About</a></li>
    <li><a href="https://ngcmshak.ru/">Contact</a></li>
    <li><a href="https://ngcmshak.ru/">More...</a></li>
  </ul>
  <div style="clear: both"></div>
</div>

Активный пункт меню присваивается класс

Код:

class="current"

4.Ну и последнее инициализация нашего меню

Код:

<script language="javascript" type="text/javascript">
  $(function({$("#webwidget_menu_glide").webwidget_menu_glide({
  menu_width:"100",
  menu_height:"30",
  menu_text_size:"15",
  menu_text_color:"#CCC",
  menu_sprite_color:"#666",
  menu_background_color:"#000",
  menu_margin:"5",
  sprite_speed:"normal"
});
});
</script>

Вот и все пользуемся ,вот еще и таблица с параметрами

menu_width:	Ширина меню
menu_height:	Высота Меню
menu_text_size:	Меню размер текста
menu_text_color:	Цвет текста меню
menu_sprite_color:	Анимация спрайта цвет
menu_background_color:	Меню Цвет фона
menu_margin:	Рентабельность Меню
sprite_speed:	Скорость анимации (вариант: медленно, нормально, быстро, без ожидания)

Можешь почитать и вот эту статейку "particles-js"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.