Хаки и Скрипты Next Generation CMS

Очень интересные стили и эффекты для горизонтального меню

irbees2008 irbees2008 Опубликовано - 10 - января Меню и навигация
2291 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

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

Код:
<section class="section section--menu" id="Yourstyle">
<span class="link-copy"></span>
<nav class="menu menu--yourstyle">
<ul class="menu__list">
<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
<li class="menu__item"><a class="menu__link">Portfolio</a></li>
<li class="menu__item"><a class="menu__link">Blog</a></li>
<li class="menu__item"><a class="menu__link">Shop</a></li>
<li class="menu__item"><a class="menu__link">Contact</a></li>
</ul>
</nav>
</section>

3. Выберите идентификатор в в файле стилей нужный вам и замените"yourstyle" на выбранный стиль,примерно так
Код:
<section class="section section--menu" id="Alonso">
<span class="link-copy"></span>
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item menu__item--current"><a href="#" class="menu__link">Главная</a></li>
<li class="menu__item"><a href="#" class="menu__link">Галерея</a></li>
<li class="menu__item"><a href="#" class="menu__link">Обзор</a></li>
<li class="menu__item"><a href="#" class="menu__link">Клиенты</a></li>
<li class="menu__item"><a href="#" class="menu__link">Контакты</a></li>
<li class="menu__line"></li>
</ul>
</nav>
</section>
У меня был выбран первый вариант "Alonso".
4. В head подключаем стиль
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/component.css" />
5.Перед закрытием тега body подключаем скрипты
Код:
<script src="{{ tpl_url }}/js/classie.js"></script>

<script>
(function() {
[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
var menuItems = menu.querySelectorAll('.menu__link'),
setCurrent = function(ev) {
ev.preventDefault();

var item = ev.target.parentNode; // li

// return if already current
if (classie.has(item, 'menu__item--current')) {
return false;
}
// remove current
classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
// set current
classie.add(item, 'menu__item--current');
};

[].slice.call(menuItems).forEach(function(el) {
el.addEventListener('click', setCurrent);
});
});

[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click', function() {
classie.add(link, 'link-copy--animate');
setTimeout(function() {
classie.remove(link, 'link-copy--animate');
}, 300);
});
});
})(window);
</script>
Ну вот вроде все, эксперементируем,там много возвожностей

Можешь почитать и вот эту статейку "Падающий снег на сайт на css и js"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [5] Google, Яндекс, Яндекс, redflame, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.411сек
  • Потребление памяти: 4.963 Mb 
  •   яндекс.ћетрика