« Навигация с помощью подпунктов с использованием CSS-переходов и анимации »

Описание материала:

Ранее я делился некоторыми навигационными элементами, но это мало чем отличается от других. По сути, элемент Navigation или HTML nav представляет раздел страницы, содержащий навигационные ссылки. Типичными примерами разделов навигации являются меню, оглавления и индексы. И большинство веб-сайтов имеют панель навигации с важными ссылками, такими как главная, форум, контакты и т.д.

Сегодня мы будем создавать адаптивную навигационную панель меню. В основном, есть панель навигации с текстовым логотипом на левой стороне и со значком гамбургера на правой стороне. За исключением значка меню все остальное содержимое является фиктивными, также есть текст в области тела. Когда вы нажмете на иконку меню, 4 пункта будут отображены с полноэкранной заливкой. Элементы разделены с помощью разных цветов и метки с названием элемента. Если щелкнуть значок со стрелкой вниз, откроются элементы подменю и второй щелчок или переключение на другое меню закроют данное.

Итак, сегодня мы делимся с вами анимированным навигационным меню с под элементами. Там мы использовали HTML для создания макета, CSS для стилей и JavaScript для работы. Нет jQuery или каких-либо других библиотек JS, вы можете назвать это чистой HTML, CSS, JS-программой. Я думаю, что это крутая и уникальная навигационная анимация, пригодится для вас и вашего сайта.

Установка:

HTML код:

Код
<!--( http://ufive.ru )-->
<link type="text/css" rel="stylesheet" href="/css/style.css" />
<body>

  <nav>
  <div class="menubar">
  <a href="http://ufive.ru" class="home">UFIVE.RU</a>
  <div class="icons">
  <i class="icon-menu"><span></span></i>
  </div>
  </div>
  <ul class="menu">

  <li class="menu-link"><a href="#" class="text-item">Главная</a></li>
  <li class="menu-link sub">
  <a href="#" class="text-item">Всё для uCoz<span class="icon"></span></a>
  <ul class="submenu">
  <li class="sub-item"><a href="#">Шаблоны</a></li>
  <li class="sub-item"><a href="#">Скрипты</a></li>
  <li class="sub-item"><a href="#">Информеры</a></li>
  </ul>
  </li>
  <li class="menu-link sub">
  <a href="#" class="text-item">CSS файлы<span class="icon"></span></a>
  <ul class="submenu">
  <li class="sub-item"><a href="#">Навигация</a></li>
  <li class="sub-item"><a href="#">Таблицы</a></li>
  <li class="sub-item"><a href="#">Формы</a></li>
  </ul>
  </li>
  <li class="menu-link"><a href="#" class="text-item">Контакты</a></li>
  </ul>
  </nav>

  <article>
  <h1>Навигация с помощью подпунктов с использованием CSS-переходов и анимации</h1>
  </article>

</body>


JS код:
Код
// ( http://ufive.ru )
var iconMenu = document.querySelector(".icon-menu"),
  menu = document.querySelector(".menu"),
  menuLink = document.querySelectorAll(".menu-link.sub");

iconMenu.addEventListener("click", openMenu);

menuLink.forEach(function(el) {
  el.addEventListener("click", openSubmenu);
});

function openMenu() {
  if (menu.classList.contains("open")) {
  menu.classList.add("close");
  iconMenu.classList.remove("icon-closed");

  setTimeout(function() {
  menu.classList.remove("open");
  }, 1300);
  } else {
  menu.classList.remove("close");
  menu.classList.add("open");
  iconMenu.classList.add("icon-closed");
  }
}

function openSubmenu(event) {
  if (event.currentTarget.classList.contains("active")) {
  event.currentTarget.classList.remove("active");
  } else {
  event.currentTarget.classList.add("active");
  }
}


Скачать ( Размер архива 62.8 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 48 | Загрузок: 1


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar