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

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

irbees2008 irbees2008 Опубликовано - 10 - января Меню и навигация
3303 - 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>
Ну вот вроде все, эксперементируем,там много возвожностей

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Теги

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

Статистика

  • Caйту: 4488 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Google
  • Были сегодня : [3] Google, Яндекс, dankeanke
  • SQL запросов: 31
  • Генерация страницы: 0.33сек
  • Потребление памяти: 5.165 Mb 
  •   Яндекс.Метрика