ZorNet.Ru — сайт для вебмастера » Меню для сайта » Адаптивное выпадающее меню на CSS3

Адаптивное выпадающее меню на CSS3

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

Как известно, то основном навигационная панель важна для любого тематического сайта. На самом деле, строка меню предоставляет информацию о веб-сайтах, которые нужны пользователям. Существуют различные виды панели навигации, где реально 50% стиля веб-сайтов зависит от стилистики их навигаций. Итак, если хотите создать привлекательный и красивый сайт, то сначала вам нужно создать стильное меню. Это то что мы сделали, где теперь его немного разберем для порядка и понимание, как все работает.

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

Отзывчивый дизайн горизонтального меню сайта


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

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

2. Здесь переходим в режим планшета, где автоматически сворачивается в панель с кнопкой и логотипом.

Адаптивное меню для сайта

3. Это только примерно, как небольшой мобильный аппарат, что также видим панель.

Адаптивное горизонтальная навигация

4. Но при клике она разворачиваться и появляются все изначальные ключевые слова.

Раскрывающееся навигация на сайте

Установочный процесс:

HTML

Код
<section class="sequel-kidsa">
  <div class="sequel-masopedub">
  <div class="mplishmen">
  <a href="/"><img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/ava-5.png"></a>
  </div>
  <nav>
  <div class="sequel-benmuekes"><a id="gedunean-giversaryd" href="#!"><span></span></a></div>
  <ul class="sequel-lasotedun">
  <li>
  <a href="#">Главная</a>
  </li>
  <li>
  <a href="#">Web Design</a>
  </li>
  <li>
  <a href="#">Zornet.Ru</a>
  <ul class="sequel-dropdown">
  <li>
  <a href="#">HTML</a>
  </li>
  <li>
  <a href="#">CSS</a>
  </li>
  <li>
  <a href="#">Дизайн</a>
  </li>
  </ul>
  </li>
  <li>
  <a href="#">Фотошоп</a>
  <ul class="sequel-dropdown">
  <li>
  <a href="#">Кисти</a>
  </li>
  <li>
  <a href="#">Градиент</a>
  </li>
  <li>
  <a href="#">Тени</a>
  </li>
  </ul>
  </li>
  <li>
  <a href="#">SEO</a>
  </li>
  <li>
  <a href="#">Контакты</a>
  </li>
  </ul>
  </nav>
  </div>
</section>

CSS

Код
.sequel-kidsa {
  height: 70px;
  background: #1f1d1d;
}

.mplishmen {
  position: absolute;
  padding-left: 15px;
  float: left;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 1.4em;
}
.mplishmen a img {
  max-height: 70px;
  max-height: 59px;
  margin-top: 5px;
}
.mplishmen a,
.mplishmen a:visited {
  color: #fbfbfb;
  text-decoration: none;
}

.sequel-masopedub {
  max-width: 1000px;
  margin: 0 auto;
}

nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 18px;
  line-height: 70px;
  background: #1f1d1d;
  color: #f7eded;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #1b8ea7;
  color: #efefef;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 203px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 21px;
}

.sequel-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(16, 16, 16, 0.15);
}
.sequel-benmuekes {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #1f1d1d;
  height: 70px;
  width: 70px;
}

@media only screen and (max-width: 798px) {
  .sequel-benmuekes {
  display: block;
  }

  nav {
  width: 100%;
  padding: 70px 0 15px;
  }
  nav ul {
  display: none;
  }
  nav ul li {
  float: none;
  }
  nav ul li a {
  padding: 15px;
  line-height: 20px;
  padding-left: 25%;
   
  }
  nav ul li ul li a {
  padding-left: 30%;
  }

  .sequel-dropdown {
  position: static;
  }
  .mplishmen a img {
  max-height: 60px;
  margin-top: 5px;
  }
}
@media screen and (min-width: 799px) {
  .sequel-lasotedun {
  display: block !important;
  }
}
#gedunean-giversaryd {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 9px 34px 15px 0px;
}
#gedunean-giversaryd span,
#gedunean-giversaryd span:before,
#gedunean-giversaryd span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fbfbfb;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#gedunean-giversaryd span:before {
  top: -10px;
}
#gedunean-giversaryd span:after {
  bottom: -10px;
}
#gedunean-giversaryd.desamuvsnis span {
  background-color: transparent;
}
#gedunean-giversaryd.desamuvsnis span:before, #gedunean-giversaryd.desamuvsnis span:after {
  top: 0;
}
#gedunean-giversaryd.desamuvsnis span:before {
  transform: rotate(45deg);
}
#gedunean-giversaryd.desamuvsnis span:after {
  transform: rotate(-45deg);
}

JS

Код
(function($) {  
  $(function() {  
  $('nav ul li a:not(:only-child)').click(function(e) {
  $(this).siblings('.sequel-dropdown').toggle();
  $('.dropdown').not($(this).siblings()).hide();
  e.stopPropagation();
  });
  $('html').click(function() {
  $('.sequel-dropdown').hide();
  });
  $('#gedunean-giversaryd').click(function() {
  $('nav ul').slideToggle();
  });
  $('#gedunean-giversaryd').on('click', function() {
  this.classList.toggle('desamuvsnis');
  });
  });  
})(jQuery);

Для создания адаптивного горизонтального меню задействовано HTML, CSS и JavaScript (jQuery). Где имеет адаптивный дизайн в чистом CSS, который корректно смотрится на всех мобильных носителях.

Как видите, здесь использован jQuery, который только предназначен для создания переключения для мобильной версии. А вот свойство CSS @media прописан, для того, чтобы создать навигаций адаптивность.

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

Важно: При установке и полноценной работы меню, здесь нужно поставить библиотеку, но кроме конструктора uCoz, ведь она по умолчанию в систему вшита, разве, что обновить ее в панели администраторов..

Демонстрация
12 Июля 2019 Загрузок: 3 Просмотров: 3962 Комментариев: (0)
Поделиться в социальных сетях

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

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

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