• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Минимальное адаптивное меню на чистый CSS (Уникальный дизайн навигации и адаптивность на чистом CSS3)
Минимальное адаптивное меню на чистый CSS
Kosten
Дата: Среда, 2020-03-18, 19:51 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26707
Награды: 61


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

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

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



HTML

Код
<header>
  
  <a class="logo" href="http://zornet.ru">ZORNET.RU</a>
  
  <input id="nav" type="checkbox">
  <label for="nav"></label>
  
  <nav>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav>
  
</header>

CSS

Код
header {
  overflow: hidden;
  background: #222;
}

header a, header label {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label:hover { color: #aaa; }

header label {
  float: right;
  padding: 18px 20px;
  cursor: pointer;
}

header label:after {
  content: "\2261";
  font-size: 1.8em;
}

.logo {
  float: left;
  font-weight: bold;
  font-size: 1.5em;
}
  
nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s;
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}
  
nav li {
  display: block;
  text-align: center;
}
  
nav a {
  padding: 10px;
  width: 100%;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {
  
  header label { display: none; }
  
  nav {
    width: auto;
    max-height: none;
  }
  
  nav ul {
    padding: 0;
    padding-right: 10px;
  }
  
  nav li {
    display: inline-block;
    text-align: left;
  }
  
  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }
  
}

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

Демонстрация
Прикрепления: 2199197.png(88.4 Kb) · minimal-respons.zip(3.5 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Минимальное адаптивное меню на чистый CSS (Уникальный дизайн навигации и адаптивность на чистом CSS3)
  • Страница 1 из 1
  • 1
Поиск: