3903
- 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>
4. В head подключаем стиль
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/component.css" />Код:
<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>Можешь почитать и вот эту статейку "Оформляем красивую ссылку"
Это тоже интересно
29.06.17Будем фиксировать менюшку
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
