ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простое адаптивное горизонтальное меню в CSS

Простое адаптивное горизонтальное меню в CSS

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

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

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

1. Это по умолчанию, так выглядит при открытии новой страницы или заходе на сайт.

2. Переход в небольшой экран, как пример это может смартфон или планшет.

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

Оригинальный эффект для горизонтальной навигаций

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

HTML

Код

<nav>
  <a href="#" class="topesa-dunikeg">Menu</a>
  <ul>
  <li><a href="#">Главное</a></li>
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

Код

nav {
  width: 100%;
  background-color: #325a75;
}

nav ul li {
  display:inline-block;
}

nav a {
  color: #fffdf7;
  display: block;
  text-decoration: none;
  padding: 23px 27px;
  font-size: 18px;
  text-shadow: 0 1px 0 #403d3d;
}

nav a:hover {
  background: #1a3e56;
}

.topesa-dunikeg {
  display:none;
  color:#c2e1f8;
}

@media screen and (max-width:500px) {
  .topesa-dunikeg {
  display:block;
  }
  nav ul li {
  display:block;
  border-top:1px #6d7c89 solid;
  }
  nav ul {
  display:none;
  }
}

Код

$(document).ready(function() {
  $('.topesa-dunikeg').click(function() {
  $('nav ul').slideToggle(500);
  });

  $(window).resize(function() {
  if ( $(window).width() > 500 ) {
  $('nav ul').removeAttr('style');
  }
  });
});

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

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

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

18 Октября 2018 Просмотров: 1368 Комментариев: (0)

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

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

Kosten

Комментарии: 0