Хаки и Скрипты Next Generation CMS : Меню и навигация, CSS, JS : Очень интересные стили и эффекты для горизонтального меню

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

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css html
Демо:

Сегодня познакомимся с интересными вариантами стилей и анимации для горизонтального меню,все эффекты содержатся в одном файле component.css,по желанию можете просто скопировать стили из этого файла в свой файл стилей,но не забываем про основные стили.
1.Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем файл component.css в папку с вашими стилями,и скрипты в папку js вашего шаблона
2. Там где хотим видеть меню добавляем сам код меню

Код:

01<section class="section section--menu" id="Yourstyle">
02  <span class="link-copy"></span>
03  <nav class="menu menu--yourstyle">
04   <ul class="menu__list">
05    <li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
06    <li class="menu__item"><a class="menu__link">Portfolio</a></li>
07    <li class="menu__item"><a class="menu__link">Blog</a></li>
08    <li class="menu__item"><a class="menu__link">Shop</a></li>
09    <li class="menu__item"><a class="menu__link">Contact</a></li>
10   </ul>
11  </nav>
12  </section>

3. Выберите идентификатор в в файле стилей нужный вам и замените"yourstyle" на выбранный стиль,примерно так

Код:

01<section class="section section--menu" id="Alonso">
02     <span class="link-copy"></span>
03    <nav class="menu menu--alonso">
04     <ul class="menu__list">
05      <li class="menu__item menu__item--current"><a href="#" class="menu__link">Главная</a></li>
06      <li class="menu__item"><a href="#" class="menu__link">Галерея</a></li>
07      <li class="menu__item"><a href="#" class="menu__link">Обзор</a></li>
08      <li class="menu__item"><a href="#" class="menu__link">Клиенты</a></li>
09      <li class="menu__item"><a href="#" class="menu__link">Контакты</a></li>
10      <li class="menu__line"></li>
11     </ul>
12    </nav>
13   </section>

У меня был выбран первый вариант "Alonso".
4. В head подключаем стиль

Код:

`1`	`<link` `rel="stylesheet"` `type="text/css"` `href="{{ tpl_url }}/css/component.css"` `/>`

5.Перед закрытием тега body подключаем скрипты

Код:

01<script src="{{ tpl_url }}/js/classie.js"></script>
02 
03  <script>
04  (function() {
05   [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
06    var menuItems = menu.querySelectorAll('.menu__link'),
07     setCurrent = function(ev) {
08      ev.preventDefault();
09 
10      var item = ev.target.parentNode; // li
11 
12      // return if already current
13      if (classie.has(item, 'menu__item--current')) {
14       return false;
15      }
16      // remove current
17      classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
18      // set current
19      classie.add(item, 'menu__item--current');
20     };
21 
22    [].slice.call(menuItems).forEach(function(el) {
23     el.addEventListener('click', setCurrent);
24    });
25   });
26 
27   [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
28    link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
29    new Clipboard(link);
30    link.addEventListener('click', function() {
31     classie.add(link, 'link-copy--animate');
32     setTimeout(function() {
33      classie.remove(link, 'link-copy--animate');
34     }, 300);
35    });
36   });
37  })(window);
38  </script>

Ну вот вроде все, эксперементируем,там много возвожностей

Можешь почитать и вот эту статейку "Редиректим на новый домен"

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

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