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

Выпадающие меню для сайта на чистом CSS

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

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

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

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

Установка:

Шрифтовые кнопки

Код

HTML

Код

<div class="mounted-anulodas">
  <input type="checkbox" id="label1" class="desanumag" />
  <label for="label1">СКРИПТЫ</label>
  <div class="mastuedoduen">
  <ul><li><a href="#">СКАЧАТЬ</a></li>
  <li><a href="#">ШАБЛОНЫ</a></li>
  <li><a href="#">ДИЗАЙН</a></li></ul>
  </div>
  <input type="checkbox" id="label2" class="desanumag" />
  <label for="label2">ФАЙЛЫ</label>
  <div class="mastuedoduen">
  Здесь представлен материал
  </div>

  <input type="checkbox" id="label3" class="desanumag" />
  <label for="label3">СТИЛИСТИКА</label>
  <div class="mastuedoduen">
  Красивый стиль для сайта
  </div>

  <input type="checkbox" id="label4" class="desanumag" />
  <label for="label4">ФОТОШОП</label>
  <div class="mastuedoduen">
  Все для вебмастера
  </div>

  <input type="checkbox" id="label5" class="desanumag" />
  <label for="label5">ОБРАТНАЯ СВЯЗЬ</label>
  <div class="mastuedoduen">
  Номер для обращение
  </div>
</div>

CSS

Код

.mounted-anulodas {
  margin: 2em 0;
  padding: 0;
  width: 412px;
}

.mounted-anulodas label {
  display: block;
  margin: 1.0px 0;
  padding: 12px 8px;
  color: #ececec;
  font-weight: bold;
  background: #022a4c;
  cursor: pointer;
  transition: all 0.3s;
}

.mounted-anulodas label:before {
  content: '\025b6';
  font-family: 'FontAwesome';
  padding-right: 10px;
}

.mounted-anulodas label:hover {
  background: #0f4377;
}

.mounted-anulodas input {
  display: none;
}

.mounted-anulodas .mastuedoduen {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
}

.desanumag:checked + label + .mastuedoduen {
  height: auto;
  padding: 8px;
  background: #5c8aab;
  opacity: 1;
}

.mounted-anulodas .mastuedoduen p {
  margin: 15px 10px
}

.desanumag:checked + label:before {
  content: '\025bc';
}
.mastuedoduen:hover {
  color: #def5ff;
}
ul {
  list-style-type: square;
}

a{
  line-height: 20px;
  color: #e8f1ce;
  text-decoration: none;
}

a:hover{
  color: #f6ffc6;

}

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

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

27 Августа 2020 Загрузок: 3 Просмотров: 1345 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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