3235
- 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>Можешь почитать и вот эту статейку "Изменение положения штампа на изображениях"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.