ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Оригинальное горизонтальное меню на jQuery

Оригинальное горизонтальное меню на jQuery

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

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

Установка:

В первую очередь, как всегда, я вам предлагаю скачать архив с материалом и загрузить папку images и документ demo в файловый менеджер вашего сайта.

Затем по месту прибывания установить код самого меню.

HTML

Код

<div id="menu-wrapper">
  <ul class="menu">
  <li> <a href="#">Название материала</a> </li>
  <li> <a href="#">Ключевое слово</a> </li>
  <li> <a href="#">Нужная фраза</a> </li>
  <li> <a href="#">Вызвать под категорию</a> </li>
  </ul>
  </div>
  <div id="submenu-wrapper">
  <ul class="submenu">
  <li>
  <a href="/">
  <img src="images/9.jpg" />
  Здесь присутствует название или краткое описание с картинкой #1
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/10.jpg" />
  Здесь присутствует название или краткое описание с картинкой #2
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/11.jpg" />
  Здесь присутствует название или краткое описание с картинкой #3
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/12.jpg" />
  Здесь присутствует название или краткое описание с картинкой #4
  </a>
  </li>
  </ul>
  <ul class="submenu">
  <li>
  <a href="/">
  <img src="images/13.jpg" />
  Здесь присутствует название или краткое описание с картинкой #5
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/14.jpg" />
  Здесь присутствует название или краткое описание с картинкой #6
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/15.jpg" />
  Здесь присутствует название или краткое описание с картинкой #7
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/16.jpg" />
  Здесь присутствует название или краткое описание с картинкой #8
  </a>
  </li>
  </ul>
  <ul class="submenu">
  <li>
  <a href="/">
  <img src="images/5.jpg" />
  Здесь присутствует название или краткое описание с картинкой #9
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/6.jpg" />
  Здесь присутствует название или краткое описание с картинкой #10
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/7.jpg" />
  Здесь присутствует название или краткое описание с картинкой #11
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/8.jpg" />
  Здесь присутствует название или краткое описание с картинкой #12
  </a>
  </li>
  </ul>
  <ul class="submenu">
  <li>
  <a href="/">
  <img src="images/1.jpg" />
  Здесь присутствует название или краткое описание с картинкой #13
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/2.jpg" />
  Здесь присутствует название или краткое описание с картинкой #14
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/3.jpg" />
  Здесь присутствует название или краткое описание с картинкой #15
  </a>
  </li>
  <li>
  <a href="/">
  <img src="images/4.jpg" />
  Здесь присутствует название или краткое описание с картинкой #16
  </a>
  </li>
  </ul>
  </div>

CSS

Далее мы пропишем ему стили и для этого установите ниже приведённые стили в самый низ стилей вашего сайта.

Код

#menu-wrapper {
  position: relative;
  display: block;
  z-index: 2;
  height: 64px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#37393e), to(#262725));
  background-image: -webkit-linear-gradient(top, #505152, #292b28);
  background-image: -moz-linear-gradient(top, #494b4e, #2f2f2f);
  background-image: -ms-linear-gradient(top, #494b4e, #2f2f2f);
  background-image: -o-linear-gradient(top, #494b4e, #2f2f2f);
  background-image: linear-gradient(to bottom, #53575a, #223238);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494b4e', endColorstr='#2c2d2b',GradientType=0 );
  font-family: "Pontano Sans";
  font-size: 16px;
  color: #f5eeee;
  text-align: center;
}

  .menu {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 870px;
  text-align: left;
  list-style-type: none;
  }

  .menu li {
  display: inline-block;
  padding: 16px 10px 25px 10px;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  }

  .menu li:hover, .selected {
  background: #212525;
  }

  .menu a, .menu a:visited {
  color: #fff;
  text-decoration: none;
  }

  #submenu-wrapper {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  z-index: 1;
  width: 850px;
  height: 130px;
  margin: -12em auto 0;
  padding: 10px 10px;
  background: rgba(33,37,37,0.9);
  font-family: "Pontano Sans";
  font-size: 13px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0px 2px 7px rgba(0,0,0,0.5);
  overflow: hidden;
  }

  .submenu {
  display: block;
  margin: 0 0 1.5em;
  padding: 0;
  list-style-type: none;
  }

  .submenu li {
  display: inline-block;
  width: 210px;
  vertical-align: top;
  text-align: center;
  }

  .submenu li img {
  display: block;
  margin: 0 auto 1em;
  width: 200px;
  border-radius: 5px;
  border: 0;
  }

  .submenu li a, .submenu li a:visited {
  color: #fff;
  text-decoration: none;
  }

JS

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

Код

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

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

16 Августа 2021 Просмотров: 1098 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 16 Августа 2021 02:51¹ 0 Пробовал вывести демонстрацию на сайте codepen.io, почему то нет тех самых эффектов появление под категорий, что сброшенного сайта уже созданную поставил, вероятно сайт работает ссылками с сертификатом.