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

Отзывчивое горизонтальное меню на CSS/JS

Отзывчивое горизонтальное меню на CSS/JS
Это адаптивное меню в темном оттенке цвета, которое имеет под категорий с красивым появлением, где корректно смотрится на всех широтах экрана. Как понимаете, что теперь на адаптивные сайты нужно устанавливать отзывчивую навигацию, так, чтоб могли воспользоваться интернет ресурсом мобильные пользователи, да и поисковые системы учитывают все нюансы. Дело в том, чтоб все красиво отображалось, как на большом мониторе, так и можно воспользоваться на небольшом экране.

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

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

Так выглядит навигация по установки с широкого экрана:

Адаптивное горизонтальное меню для сайта на HTML+CSS

И сразу просматриваем с мобильного гаджета:

Мобильное меню сайта на CSS и JS

Переходим к установочному процессу:

HEAD

Код
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

HTML

Код
<header>
  <div class="container">
  <nav id='navigatsion_menyu'>
  <div class="snachok_logotipa"><a href="/">ZORNET.RU</a></div>
  <div id="head-mobile"></div>
  <div class="pugovitsa"></div>
  <ul>
  <li class='kagednola'><a href='#'>КОНТАКТЫ</a></li>
  <li><a href='#'>СКРИПТЫ</a></li>
  <li><a href='#'>ШАБЛОНЫ</a>
  <ul>
  <li><a href='#'>Product 1</a>
  <ul>
  <li><a href='#'>Sub Product</a></li>
  <li><a href='#'>Sub Product</a></li>
  </ul>
  </li>
  <li><a href='#'>Product 2</a>
  <ul>
  <li><a href='#'>Sub Product</a></li>
  <li><a href='#'>Sub Product</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href='#'>ДИЗАЙН</a></li>
  <li><a href='#'>VIDEO</a></li>
  <li><a href='#'>CSS</a></li>
  <li><a href='#'>ГЛАВНАЯ</a></li>
  </ul>
  </nav>
  </div>
  </header>

CSS

Код
header{
background: #272222;
padding: 12px;
}

.snachok_logotipa{
position:relative;
z-index:123;
padding:10px;
font:18px verdana;
color:#6DDB07;
float:left;
width:15%}

.snachok_logotipa a{
color:#fff;
}

nav{
position:relative;
}

#navigatsion_menyu,#navigatsion_menyu ul,#navigatsion_menyu ul li,#navigatsion_menyu ul li a,#navigatsion_menyu #head-mobile{
border:0;
list-style:none;
line-height:1;
display:block;
position:relative;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin: 0;
padding: 0;
}

#navigatsion_menyu:after,#navigatsion_menyu > ul:after{
content:'.';
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0}

#navigatsion_menyu #head-mobile{
display:none}

#navigatsion_menyu{
font-family:sans-serif;
}

#navigatsion_menyu > ul > li{
float: right;
}

#navigatsion_menyu > ul > li > a{
padding:17px;
font-size:12px;
letter-spacing:1px;
text-decoration:none;
color:#ddd;
font-weight:700;
}

#navigatsion_menyu > ul > li:hover > a,#navigatsion_menyu ul li.kagednola a{
color:#fff
}

#navigatsion_menyu > ul > li:hover,#navigatsion_menyu ul li.kagednola:hover,#navigatsion_menyu ul li.kagednola,#navigatsion_menyu ul li.has-sub.kagednola:hover{
background:#2475a5!important;
-webkit-transition:background .3s ease;
-ms-transition:background .3s ease;
transition:background .3s ease;
}

#navigatsion_menyu > ul > li.has-sub > a{
padding-right:30px}

#navigatsion_menyu > ul > li.has-sub > a:after{
position:absolute;
top:22px;
right:11px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu > ul > li.has-sub > a:before{
position:absolute;
top:19px;
right:14px;
display:block;
width:2px;
height:8px;
background:#ddd;
content:'';
-webkit-transition:all .25s ease;
-ms-transition:all .25s ease;
transition:all .25s ease}

#navigatsion_menyu > ul > li.has-sub:hover > a:before{
top:25px;
height:0;
}

#navigatsion_menyu ul ul{
position:absolute;
left:-9999px}

#navigatsion_menyu ul ul li{
height:0;
-webkit-transition:all .25s ease;
-ms-transition:all .25s ease;
background:#333;
transition:all .25s ease}

#navigatsion_menyu ul ul li:hover{
}

#navigatsion_menyu li:hover > ul{
left:auto}

#navigatsion_menyu li:hover > ul > li{
height:35px}

#navigatsion_menyu ul ul ul{
margin-left:100%;
top:0}

#navigatsion_menyu ul ul li a{
border-bottom:1px solid rgba(150,150,150,0.15);
padding:11px 15px;
width:170px;
font-size:12px;
text-decoration:none;
color:#ddd;
font-weight:400;
}

#navigatsion_menyu ul ul li:last-child > a,#navigatsion_menyu ul ul li.last-item > a{
border-bottom:0}

#navigatsion_menyu ul ul li:hover > a,#navigatsion_menyu ul ul li a:hover{
color:#fff}

#navigatsion_menyu ul ul li.has-sub > a:after{
position:absolute;
top:16px;
right:11px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu ul ul li.has-sub > a:before{
position:absolute;
top:13px;
right:14px;
display:block;
width:2px;
height:8px;
background:#ddd;
content:'';
-webkit-transition:all .25s ease;
-ms-transition:all .25s ease;
transition:all .25s ease}

#navigatsion_menyu ul ul > li.has-sub:hover > a:before{
top:17px;
height:0}

#navigatsion_menyu ul ul li.has-sub:hover,#navigatsion_menyu ul li.has-sub ul li.has-sub ul li:hover{
background:#363636;
}

#navigatsion_menyu ul ul ul li.kagednola a{
border-left:1px solid #333}

#navigatsion_menyu > ul > li.has-sub > ul > li.kagednola > a,#navigatsion_menyu > ul ul > li.has-sub > ul > li.kagednola> a{
border-top:1px solid #333}

@media screen and (max-width:1000px){
.snachok_logotipa{
position:absolute;
top:0;
left: 0;
width:100%;
height:46px;
text-align:center;
padding:10px 0 0 0;
float:none}

.snachok_logotipa2{
display:none}

nav{
width:100%;
}

#navigatsion_menyu{
width:100%}

#navigatsion_menyu ul{
width:100%;
display:none}

#navigatsion_menyu ul li{
width:100%;
border-top:1px solid #444}

#navigatsion_menyu ul li:hover{
background:#363636;
}

#navigatsion_menyu ul ul li,#navigatsion_menyu li:hover > ul > li{
height:auto}

#navigatsion_menyu ul li a,#navigatsion_menyu ul ul li a{
width:100%;
border-bottom:0}

#navigatsion_menyu > ul > li{
float:none}

#navigatsion_menyu ul ul li a{
padding-left:25px}

#navigatsion_menyu ul ul li{
background:#333!important;
}

#navigatsion_menyu ul ul li:hover{
background:#363636!important}

#navigatsion_menyu ul ul ul li a{
padding-left:35px}

#navigatsion_menyu ul ul li a{
color:#ddd;
background:none}

#navigatsion_menyu ul ul li:hover > a,#navigatsion_menyu ul ul li.kagednola > a{
color:#fff}

#navigatsion_menyu ul ul,#navigatsion_menyu ul ul ul{
position:relative;
left:0;
width:100%;
margin:0;
text-align:left}

#navigatsion_menyu > ul > li.has-sub > a:after,#navigatsion_menyu > ul > li.has-sub > a:before,#navigatsion_menyu ul ul > li.has-sub > a:after,#navigatsion_menyu ul ul > li.has-sub > a:before{
display:none}

#navigatsion_menyu #head-mobile{
display:block;
padding:23px;
color:#ddd;
font-size:12px;
font-weight:700}

.pugovitsa{
width:55px;
height:46px;
position:absolute;
right:0;
top:0;
cursor:pointer;
z-index: 12399994;
}

.pugovitsa:after{
position:absolute;
top:22px;
right:20px;
display:block;
height:4px;
width:20px;
border-top:2px solid #dddddd;
border-bottom:2px solid #dddddd;
content:''}

.pugovitsa:before{
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
position:absolute;
top:16px;
right:20px;
display:block;
height:2px;
width:20px;
background:#ddd;
content:''}

.pugovitsa.menu-opened:after{
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
top:23px;
border:0;
height:2px;
width:19px;
background:#fff;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)}

.pugovitsa.menu-opened:before{
top:23px;
background:#fff;
width:19px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)}

#navigatsion_menyu .nagdsa-mibdnsole{
position:absolute;
z-index:99;
right:0;
top:0;
display:block;
border-left:1px solid #444;
height:46px;
width:46px;
cursor:pointer}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened{
background:#262626}

#navigatsion_menyu ul ul .nagdsa-mibdnsole{
height:34px;
width:34px
  }

#navigatsion_menyu .nagdsa-mibdnsole:after{
position:absolute;
top:22px;
right:19px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu ul ul .nagdsa-mibdnsole:after{
top:15px;
right:13px}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened:after{
background:#fff}

#navigatsion_menyu .nagdsa-mibdnsole:before{
position:absolute;
top:19px;
right:22px;
display:block;
width:2px;
height:8px;
background:#ddd;
content:''}

#navigatsion_menyu ul ul .nagdsa-mibdnsole:before{
top:12px;
right:16px}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened:before{
display:none}

#navigatsion_menyu ul ul ul li.kagednola a{
border-left:none}

#navigatsion_menyu > ul > li.has-sub > ul > li.kagednola > a,#navigatsion_menyu > ul ul > li.has-sub > ul > li.kagednola > a{
border-top:none}
}

JS

Код
(function($) {
  $.fn.menumaker = function(options) {  
  var navigatsion_menyu = $(this), settings = $.extend({
  format: "dropdown",
  sticky: false
  }, options);
  return this.each(function() {
  $(this).find(".pugovitsa").on('click', function(){
  $(this).toggleClass('menu-opened');
  var mainmenu = $(this).next('ul');
  if (mainmenu.hasClass('open')) {  
  mainmenu.slideToggle().removeClass('open');
  }
  else {
  mainmenu.slideToggle().addClass('open');
  if (settings.format === "dropdown") {
  mainmenu.find('ul').show();
  }
  }
  });
  navigatsion_menyu.find('li ul').parent().addClass('has-sub');
  multiTg = function() {
  navigatsion_menyu.find(".has-sub").prepend('<span class="nagdsa-mibdnsole"></span>');
  navigatsion_menyu.find('.nagdsa-mibdnsole').on('click', function() {
  $(this).toggleClass('submenu-opened');
  if ($(this).siblings('ul').hasClass('open')) {
  $(this).siblings('ul').removeClass('open').slideToggle();
  }
  else {
  $(this).siblings('ul').addClass('open').slideToggle();
  }
  });
  };
  if (settings.format === 'multitoggle') multiTg();
  else navigatsion_menyu.addClass('dropdown');
  if (settings.sticky === true) navigatsion_menyu.css('position', 'fixed');
  resizeFix = function() {
  var mediasize = 1000;
  if ($( window ).width() > mediasize) {
  navigatsion_menyu.find('ul').show();
  }
  if ($(window).width() <= mediasize) {
  navigatsion_menyu.find('ul').hide().removeClass('open');
  }
  };
  resizeFix();
  return $(window).on('resize', resizeFix);
  });
  };
  })(jQuery);

  (function($){
  $(document).ready(function(){
  $("#navigatsion_menyu").menumaker({
  format: "multitoggle"
  });
  });
  })(jQuery);

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

Где увидите вертикальную и горизонтальную навигацию с выпадающими списками и выпадающими панелями, а также все виды анимационных эффектов при наведении курсора.

Демонстрация
05 Мая 2020 Загрузок: 2 Просмотров: 978 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 0
Войдите:
avatar