• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание гамбургер меню на чистом CSS (Самостоятельно сделать гамбургер меню на чистом CSS)
Создание гамбургер меню на чистом CSS
Kosten
Дата: Пятница, 2019-03-29, 19:56 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


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

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

При открытие страницы или сайта:



Это по клику появляться каркас:



Установка:

HTML

Код
<input type="checkbox" id="menu" />
<label for="menu">
<div class="tugkos">
  <div class="venmip_odesan gunave_dasopedu_cekon"></div>
  <div class="venmip_odesan kegutu_sogas_denkos"></div>
</div>
  </label>
<ul class="menu">
  <li>Скрипты сайта</li>
  <li>Шаблоны сайта</li>
  <li>Дизайн портала</li>
  <li>Стилистика сайта</li>
  <li>Обратная связь админ</li>
</ul>


CSS

Код
.tugkos {
  width: 35px;
  height: 25px;
  position: relative;
  cursor: pointer;
  transition: 1s;
}

.venmip_odesan {
  position: absolute;
  border-radius: 10px;
  width: 35px;
  height: 5px;
  background-color: #fff;
}

.gunave_dasopedu_cekon {
  top: 0;
}

.kegutu_sogas_denkos {
  top: 10px;
  position: absolute;
}

.kegutu_sogas_denkos::after {
  content: '';
  position: absolute;
  top: 10px;
  border-radius: 10px;
  width: 35px;
  height: 5px;
  background-color: #fff;
}

input, ul {
  display: none;
}

input:checked ~ ul {
  display: inline-block;
}

ul {
    text-align: center;
    list-style-type: none;
    color: #f9eeee;
    font-family: sans-serif;
    background-color: rgba(243, 228, 228, 0.27);
    padding: 0;
    margin-top: 1em;
}

li {
  padding: 1em 5em;
  cursor: pointer;
}

li:hover {
    background-color: rgba(232, 221, 221, 0.3);
}

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

Демонстрация
Прикрепления: 1758833.png(0.6 Kb) · 1296113.png(10.7 Kb) · css-3.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание гамбургер меню на чистом CSS (Самостоятельно сделать гамбургер меню на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: