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

Раскрывающееся горизонтальное меню на CSS

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

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

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

HTML

Код

<body>
  <div class="kalesarumis-menu">
  <input type="checkbox" id="menu">
  <label for="menu">Menu</label>
  <div class="zornet_ru_lagen">
  <ul>
  <li><a href="http://zornet.ru/load/80"></a>Мини профиль для uCoz</li>
  <li><a href="#"></a>Скрипты для uCoz</li>
  <li><a href="#"></a>Ajax окна для uCuz</li>

  <li><a href="http://zornet.ru"></a>ZorNet: Создание сайта на uCoz</li>
  </ul>
  </div>
  </div>
  </body>

CSS

Код

.zornet_ru_lagen {
  font-family: 'Oswald', sans-serif;
  padding: 0 0 0 50px;
}
.kalesarumis-menu {
  background-color: rgb(245, 240, 240);
  padding: 0px 29px;
  border-bottom: 3px solid #659bd2;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.18);
}
.kalesarumis-menu ul {
  list-style-type: none;
  padding: 0;
}
.kalesarumis-menu a {
  display:block;
  padding: 10px;
  text-decoration: none;
}

.kalesarumis-menu label {
  font-family: 'Sedgwick Ave Display', cursive;
  font-size: 56px;
  display: block;
  cursor: pointer;
  background: url(http://zornet.ru/Aben/ABGDA/9qn5eRpZTnCWt3WiN2Qt_g.png) no-repeat left center;
  padding: 10px 0 10px 50px;
}
input#menu {
  display: none;
}

.zornet_ru_lagen {
  max-height: 0;
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
  padding: 0 0 0 50px;
}
/* Эффект переключения*/
input:checked ~ label {
  background-image: url(http://zornet.ru/Aben/ABGDA/rVseZtO6SWSYryj61SD38Q.png);
}
input:checked ~ .zornet_ru_lagen {
  max-height: 100%;
}

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

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

10 Февраля 2018 Просмотров: 2226 Комментариев: (0)

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

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

Kosten

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