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

Вертикальное меню с выпадающим списком

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

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

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

Ниже предоставлена ссылка на demo страницу, где материал полностью проверен.

Эта кнопка, что изначально появляется.

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

При клике она пропадает и выезжает основа навигаций, где выставлены различные запросы, что могут вести на разделы или на одну тематику в разброс по разным предложением.

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

HTML

Код

<input type="checkbox" id="kasengem" hidden>
<label for="kasengem"><span class="fa fa-navicon"></span></label>
<nav>
  <ul>
  <li>Первый запрос 1</li>
  <li>Второй запрос 2</li>
  <li>Третий запрос 3</li>
  <li>Четвертый запрос 4</li>
  <li>Пятая секция сайта 5</li>
  </ul>
</nav>
<div class="soginsigs-ctobecomin">
</div>

CSS

Код

span {
  font-size: 2em !important;
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9999;
}

#kasengem:checked ~ .soginsigs-ctobecomin {
  transform: translate(250px, 0);
  padding-right: 249px;
}

#kasengeme:checked ~ label {
  color: #f3efef;
}

nav {
  height: 100%;
  width: 267px;
  background: #2d3c4c;
  position: fixed;
  z-index: 1;
  padding-top: 53px;
  color: #efe8e8;
}

nav ul {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  padding: 8px 0 8px 0;
}

nav li:hover {
  background: #253435;
  cursor: pointer;
}

label:hover {
  cursor: pointer;
}

.soginsigs-ctobecomin {
  padding: 49px;
  background-color: #55ee70;
  min-height: 100vh;
  max-width: 100%;
  text-align: center;
  transition: .7s all;
  z-index: 200;
  position: relative;
}

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

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

20 Ноября 2018 Просмотров: 1637 Комментариев: (0)

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

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

Kosten

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