ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Оригинальное горизонтальное меню на 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

И в заключение подключим скрипт который помогает открываться субменю, просто скопируйте код ниже и вставьте в нижнюю или в верхнюю часть вашего сайта.
Код
<script type="text/javascript" src="/demo.js"></script>


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

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

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

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

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

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