• 1209
  • 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>
Ну вот вроде все, эксперементируем,там много возвожностей

Можешь почитать и вот эту статейку "Мозаичный эффект для фонового слайдшоу"

mistakes

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

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

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

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