ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Горизонтальное меню с выпадающим списком

Горизонтальное меню с выпадающим списком

Стиль адаптивного меню в горизонтальном виде отлично подойдет на многие сайты, что установив его в самый вверх, и поставить свой оттенок в CSS. Также на нем можно вписать самые актуальные запросы, и на некоторый поставить под категорий, что при клике будут открываться. Если под ссылкой ключевой фраза, то на ней выставлен эффект при наведении, это появление в самом низу горизонтальной полосы, а если идет с категориями, то там не буде, так как при клике выплывает панель.

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

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

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

Горизонтальное выпадающее меню HTML + CSS

Здесь аналогично, только уже со скрытыми списками.

Горизонтальное меню CSS для сайта на HTML

Здесь уже видно, что просматриваем с мобильного аппарата, что автоматически сложилась в панель с кнопкой по правую сторону.

Остается сделать клик на этой иконке и полностью меню раскрывается, где не теряет заданные запросы, что были поставлены по умолчанию.

Адаптивная навигация в темном оттенке на CSS

Приступаем к установке:

HTML

Код

<nav>
  <div class="avenumopag">
  <div class="customedag">ZORNET.RU</div>
  <div class="kigomebug">
  <i class="fa fa-bars fa-2x fa-fw"></i>
  </div>
  <div class="saqenoved-katingeam">
  <ul class="dagwaren-saproduces">
  <li><a href="http://zornet.ru/load/81" class="bugmpokan">Скрипты</a></li>
  <li><a href="http://zornet.ru/load/142" class="bugmpokan">Шаблоны</a></li>
  <li><a href="#" class="bugmpokan">JavaScript</a></li>
  <li><a href="http://zornet.ru/load/146" class="bugmpokan">jQuery</a></li>
  <li class="kamaseting">Категорий
  <ul class="setingmain-comagoned">
  <li><a href="#" class="bugmpokan">Под категория №1</a></li>
  <li><a href="#" class="bugmpokan">Под категория №2</a></li>
  <li><a href="#" class="bugmpokan">Под категория №3</a></li>
  <li><a href="#" class="bugmpokan">Под категория №4</a></li>
  </ul>
  </li>
  <li><a href="#" class="bugmpokan">Контакты</a></li>
  </ul>
  </div>
  <div class="gonedoptim-esomebug"></div>
  </div>
</nav>

CSS

Код

.avenumopag {
  width: 97%;
  margin: 0 auto;
  padding: 3px 0px;
}
nav {
  background-color: #252222;
  color: #dcd4d4;
}
nav .brand {
  width: 10%;
  float: left;
  padding: 18px 0;
  font-size: 20px;
  cursor: pointer;
  transition: all .3s ease-in-out
}
nav .kigomebug {
  display: none
}
nav .saqenoved-katingeam {
  float: right;
  width: 80%;
}
nav .saqenoved-katingeam ul {
  list-style: none;
  text-align: right
}

nav .saqenoved-katingeam ul li {
  display: inline-block;
  padding: 10px 10px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  font-size: 15px;
  font-weight: bold;
}
nav .saqenoved-katingeam ul li:hover,
nav .brand:hover {
  color: #def2ff;
}

.customedag{
  color: #eceaea;
  float: left;
  padding: 18px 0;
  font-size: 23px;
}

.bugmpokan {
  text-decoration: none;
  color: #eceaea;
  font-size: 15px;
  font-weight: bold;
}

.bugmpokan:hover {
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0px 2px 0px 0px rgba(132, 211, 243, 0.79);
padding: 5px 0px;
}

.kamaseting {
  position: relative;
  padding-right: 13px !important;
}
.kamaseting:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #ccc transparent transparent transparent;
  border-width: 5px 5px 5px 5px;
  position: absolute;
  top: 17px;
  right: 0;
}
.kamaseting .setingmain-comagoned {
position: absolute;
  top: 52px;
  left: -19px;
  border: 1px solid #222;
  background-color: #222;
  border-radius: 0 0 5px 5px;
  padding: 10px 0 10px 0;
  width: 150px;
  text-align: left;
  display: none;
  padding: 0;
}
.kamaseting .setingmain-comagoned li {
  color: #afa8a8;
  display: block;
  font-weight: bold;
  transition: all .3s ease-in-out
}
.kamaseting .setingmain-comagoned {
  border-top: 2px solid #3392b7;
}
.kamaseting .setingmain-comagoned li:last-of-type {
  padding-bottom: 20px;
}
.kamaseting .setingmain-comagoned li:hover {
  margin-left: 1px;
  color: #339eb7;
}

.gonedoptim-esomebug {
  clear: both
}
@media (max-width:860px) {
  nav .kigomebug {
  display: block;
  float : right;
  width : 80%;
  text-align : right;
  padding: 12px 0;
  cursor: pointer;
  }

  nav .saqenoved-katingeam{
  width: 100%;
  }
  nav .saqenoved-katingeam ul {
  border-top: 2px solid #383838;
  display: none;
  text-align: left;
  padding: 0 0 20px;
  margin: 0;
  }

  nav .saqenoved-katingeam ul li {
  display: block;
  font-weight: bold;
  }

  .kamaseting .setingmain-comagoned {
  position: static;
  width: 100%;
  margin-top: 20px;
  }
}

  @media screen and (max-width:860px) {
.customedag {
display: none;
}
}

JQUERY

Код

$(function () {

  "use strict";

  $("nav .kigomebug").on("click", function () {

  $("nav .saqenoved-katingeam .dagwaren-saproduces").slideToggle();
  });

  console.log($(window).width());

  $(window).on("resize", function () {

  if ($(window).width() >= 992) {

  $("nav .saqenoved-katingeam .dagwaren-saproduces").fadeIn();
  }

  });

  $("nav .saqenoved-katingeam ul .kamaseting").on("click", function () {

  $("nav .saqenoved-katingeam ul .kamaseting .setingmain-comagoned").slideToggle();
  });

});

Если кратко про навигацию, то это адаптивное меню использует всю ширину окна браузера, где предназначено несколько вариантов в основание дизайна, которое предпринимается для переключения между горизонтальным и вертикальным планированием.

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

Код

После как все сделали, то лучше почистить кэш браузера, чтоб изначально все корректно выводило, это больше касается браузеров с движком хром, на них после каждого установленного стиля, нужно производить зачистку.

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

22 Января 2019 Загрузок: 1 Просмотров: 1591 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: Кодин 23 Января 2019 18:36¹ 0 Дайте пожалуйста полный листинг Html Текстовой слайдер с описанием на CSS + JS Собираю и ничего не получается. Заранее благодарен! Kosten 23 Января 2019 19:27² 0 Эту навигация взята сайта codepen.io, где просто запросы были прописаны, и не было место под ссылки. Если вам так нужно, то можете перейти по этой ссылке и скачать. responsive navbar like bootstrap - https://codepen.io/starahmad6161/pen/GMyMNN Что также здесь могли скачать.