ZorNet.Ru — сайт для вебмастера » Меню для сайта » Горизонтальное меню на CSS с категориями

Горизонтальное меню на CSS с категориями

Горизонтальное меню на CSS с категориями
Простой и практичный специальный эффект раскрывающегося меню при помощи jQuery и CSS3, которое имеет красивый дизайн с функциями смены запросов. Где пользователь после нажатия кнопки идет раскрытие меню второго уровня, где первые запросы опустится вниз, чтобы закрыть исходное главное меню. После закрытия раскрывающееся меню второго уровня снова поднимется вверх. И вмести с эффектом меняется оттенок цвета, где по умолчанию идет темная навигация, а при смене в розовом оттенке.

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

Так идет по умолчанию или раскрытию страницы:

Горизонтальное навигация для сайта на HTML+CSS

Здесь нажимаем на категорий и меняем ключевые запросы:

Создание меню для сайта при помощи CSS3 + HTML

Установка:

Многие веб-сайты имеют довольно сложную информационную архитектуру со многими уровнями категорий. Хотя категории нижнего уровня часто отображаются на рабочем столе в выпадающих меню или мега-меню, представление этих подкатегорий на мобильных устройствах не всегда просто.

В HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

HTML

Код
<header>
  <div class="cd-logo"><a href="#0"><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/cat-icon.png" alt="Logo"></a></div>
  <nav class="cd-main-nav-wrapper">
  <ul class="cd-main-nav">
  <li><a href="#0">Главная</a></li>
  <li><a href="#0">Новости</a></li>
  <li><a href="#0">Блоги</a></li>
  <li><a href="#0">Контакты</a></li>
  <li>
  <a href="#0" class="cd-subnav-trigger"><span>Категорий</span></a>
  <ul>
  <li class="go-back"><a href="#0">Menu</a></li>
  <li><a href="#0">Скрипты</a></li>
  <li><a href="#0">Шаблоны</a></li>
  <li><a href="#0">Дизайн</a></li>
  <li><a href="#0">Стили</a></li>
  <li><a href="#0">Файлы</a></li>
  <li><a href="#0" class="placeholder">Заполнитель</a></li>
  </ul>
  </li>
  </ul>  
  </nav>  
   
  <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
  </header>
   
  <main class="cd-main-content">
  </main>

CSS

Код
body ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section, main {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* --------------------------------  

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "PT Sans", sans-serif;
  color: #33414a;
  background-color: #f2f2f2;
}

a {
  color: #7e4d7e;
  text-decoration: none;
}

/* --------------------------------  

Main Components  

-------------------------------- */
header {
  position: fixed;
  z-index: 3;
  height: 50px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #33414a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
header.nav-is-visible {
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
header::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
@media only screen and (min-width: 1024px) {
  header {
  height: 80px;
  }
  header.nav-is-visible {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  }
  header::before {
  content: 'desktop';
  }
}

.cd-logo {
  display: inline-block;
  height: 100%;
  margin-left: 15px;
  /* remove jump on iOS devices - when we fire the navigation */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-logo img {
  display: block;
  max-width: 100%;
  margin-top: 14px;
}
@media only screen and (min-width: 1024px) {
  .cd-logo {
  position: absolute;
  z-index: 2;
  margin-left: 5%;
  }
  .cd-logo img {
  margin-top: 29px;
  }
}

.cd-nav-trigger {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  /* hide text */
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.cd-nav-trigger span {
  /* hamburger icon created in CSS */
  position: absolute;
  height: 2px;
  width: 20px;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background-color 0.3s 0.3s;
  -moz-transition: background-color 0.3s 0.3s;
  transition: background-color 0.3s 0.3s;
  background-color: #ffffff;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  -moz-transition: -moz-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.nav-is-visible .cd-nav-trigger span {
  background-color: rgba(255, 255, 255, 0);
}
.nav-is-visible .cd-nav-trigger span::before {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
@media only screen and (min-width: 1024px) {
  .cd-nav-trigger {
  display: none;
  }
}

.cd-main-nav {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  width: 260px;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  background: #1e262c;
  -webkit-transition: visibility 0s 0.3s;
  -moz-transition: visibility 0s 0.3s;
  transition: visibility 0s 0.3s;
}
.cd-main-nav a {
  display: block;
  font-size: 1.8rem;
  padding: .9em 2em .9em 1em;
  border-bottom: 1px solid #33414a;
  color: #ffffff;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.cd-main-nav li ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(260px);
  -moz-transform: translateX(260px);
  -ms-transform: translateX(260px);
  -o-transform: translateX(260px);
  transform: translateX(260px);
}
.cd-main-nav.nav-is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-main-nav.moves-out > li > a {
  /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.cd-main-nav.moves-out > li > ul {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-main-nav .cd-subnav-trigger, .cd-main-nav .go-back a {
  position: relative;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
  /* arrow icon in CSS */
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: inline-block;
  height: 2px;
  width: 10px;
  background: #485c68;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .go-back a::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
  /* arrow goes on the right side - children navigation */
  right: 20px;
  -webkit-transform-origin: 9px 50%;
  -moz-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  -o-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
}
.cd-main-nav .go-back a {
  padding-left: 2em;
}
.cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
  /* arrow goes on the left side - go back button */
  left: 20px;
  -webkit-transform-origin: 1px 50%;
  -moz-transform-origin: 1px 50%;
  -ms-transform-origin: 1px 50%;
  -o-transform-origin: 1px 50%;
  transform-origin: 1px 50%;
}
.cd-main-nav .placeholder {
  /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
  display: none;
}
@media only screen and (min-width: 1024px) {
  .cd-main-nav {
  position: static;
  visibility: visible;
  width: 100%;
  height: 80px;
  line-height: 80px;
  /* padding left = logo size + logo left position*/
  padding: 0 5% 0 calc(5% + 124px);
  background: transparent;
  text-align: right;
  }
  .cd-main-nav li {
  display: inline-block;
  height: 100%;
  padding: 0 .4em;
  }
  .cd-main-nav li a {
  display: inline-block;
  padding: .8em;
  line-height: 1;
  font-size: 1.6rem;
  border-bottom: none;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  }
  .cd-main-nav li a:not(.cd-subnav-trigger):hover {
  opacity: .6;
  }
  .cd-main-nav .go-back {
  display: none;
  }
  .cd-main-nav .cd-subnav-trigger {
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5em;
  -webkit-transition: border 0.3s;
  -moz-transition: border 0.3s;
  transition: border 0.3s;
  }
  .cd-main-nav .cd-subnav-trigger:hover {
  border-color: rgba(255, 255, 255, 0.4);
  }
  .cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
  top: 22px;
  right: 17px;
  background-color: #ffffff;
  /* change transform-origin to rotate the arrow */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform 0.3s, width 0.3s, right 0.3s;
  -moz-transition: -moz-transform 0.3s, width 0.3s, right 0.3s;
  transition: transform 0.3s, width 0.3s, right 0.3s;
  }
  .cd-main-nav .cd-subnav-trigger::before {
  right: 23px;
  }
  .cd-main-nav .cd-subnav-trigger, .cd-main-nav .placeholder {
  padding-right: 2.4em;
  padding-left: 1.1em;
  }
  .cd-main-nav li ul {
  height: 80px;
  background-color: #7e4d7e;
  /* padding left = logo size + logo left position*/
  padding: 0 5% 0 calc(5% + 124px);
  -webkit-transform: translateY(-80px);
  -moz-transform: translateY(-80px);
  -ms-transform: translateY(-80px);
  -o-transform: translateY(-80px);
  transform: translateY(-80px);
  -webkit-transition: -webkit-transform 0.3s 0.2s;
  -moz-transition: -moz-transform 0.3s 0.2s;
  transition: transform 0.3s 0.2s;
  }
  .cd-main-nav li ul li {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: -webkit-transform 0.3s 0s, opacity 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, opacity 0.3s 0s;
  transition: transform 0.3s 0s, opacity 0.3s 0s;
  }
  .cd-main-nav .placeholder {
  /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-event: none;
  }
  .cd-main-nav.moves-out > li > a {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  .cd-main-nav.moves-out > li > ul {
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  }
  .cd-main-nav.moves-out > li ul li {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.3s 0.2s, opacity 0.3s 0.2s;
  -moz-transition: -moz-transform 0.3s 0.2s, opacity 0.3s 0.2s;
  transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::before, .cd-main-nav.moves-out .cd-subnav-trigger::after {
  width: 14px;
  right: 17px;
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::before {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  }
}

.cd-main-content::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
@media only screen and (min-width: 1024px) {
  .cd-main-content::before {
  content: 'desktop';
  }
}

.cd-main-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding-top: 50px;
  background-color: #f2f2f2;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-main-content.nav-is-visible {
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
@media only screen and (min-width: 1024px) {
  .cd-main-content {
  padding-top: 80px;
  }
}

.no-js .cd-nav-trigger, .no-js .cd-subnav-trigger {
  display: none;
}

.no-js header {
  position: relative;
  height: auto;
}

.no-js .cd-logo img {
  margin-bottom: 14px;
}

.no-js .cd-main-nav {
  position: static;
  width: 100%;
  height: auto;
  visibility: visible;
  overflow: visible;
}
.no-js .cd-main-nav li {
  display: inline-block;
}
.no-js .cd-main-nav li:last-child {
  display: block;
}
.no-js .cd-main-nav .go-back {
  display: none;
}
.no-js .cd-main-nav li ul {
  position: static;
  width: 100%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
@media only screen and (min-width: 1024px) {
  .no-js .cd-main-nav {
  height: 80px;
  }
  .no-js .cd-main-nav li ul {
  position: absolute;
  top: 80px;
  }
  .no-js .cd-main-nav li ul li {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  }
  .no-js .cd-main-nav li ul li:last-child {
  display: none;
  }
}

.no-js .cd-main-content {
  padding-top: 0;
}
@media only screen and (min-width: 1024px) {
  .no-js .cd-main-content {
  padding-top: 80px;
  }
}

JS

Код
jQuery(document).ready(function($){
  //move nav element position according to window width
  moveNavigation();
  $(window).on('resize', function(){
  (!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
  });

  //mobile version - open/close navigation
  $('.cd-nav-trigger').on('click', function(event){
  event.preventDefault();
  if($('header').hasClass('nav-is-visible')) $('.moves-out').removeClass('moves-out');
   
  $('header').toggleClass('nav-is-visible');
  $('.cd-main-nav').toggleClass('nav-is-visible');
  $('.cd-main-content').toggleClass('nav-is-visible');
  });

  //mobile version - go back to main navigation
  $('.go-back').on('click', function(event){
  event.preventDefault();
  $('.cd-main-nav').removeClass('moves-out');
  });

  //open sub-navigation
  $('.cd-subnav-trigger').on('click', function(event){
  event.preventDefault();
  $('.cd-main-nav').toggleClass('moves-out');
  });

  function moveNavigation(){
  var navigation = $('.cd-main-nav-wrapper');
  var screenSize = checkWindowWidth();
  if ( screenSize ) {
  //desktop screen - insert navigation inside header element
  navigation.detach();
  navigation.insertBefore('.cd-nav-trigger');
  } else {
  //mobile screen - insert navigation after .cd-main-content element
  navigation.detach();
  navigation.insertAfter('.cd-main-content');
  }
  }

  function checkWindowWidth() {
  var mq = window.getComputedStyle(document.querySelector('header'), '::before').getPropertyValue('content').replace(/"/g, '');
  return ( mq == 'mobile' ) ? false : true;
  }
});

Структура HTML вторичного раскрывающегося меню состоит из двух основных частей: используйте элемент header, чтобы обернуть меню навигации, и элемент main, чтобы разместить содержимое страницы. Также главное навигационное меню состоит из двух вложенных неупорядоченных списков, заключенных в элемент nav, где можно самостоятельно добавить больше запросов.

Демонстрация
2020-06-12 Загрузок: 1 Просмотров: 267 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2020-06-12 00:591
0
На счет навигаций, то такой вариант есть на сайте, как материал горизонтального меню. Так получилось. что знаю. что на сайт его размещал, но найти не мог, что вероятно немного по другому создано.
avatar