• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивное меню на чистом CSS3 (Как создать адаптивное меню навигации, используя только CSS)
Создать адаптивное меню на чистом CSS3
Kosten
Дата: Пятница, 2020-02-28, 18:33 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26125
Награды: 60


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

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



В адаптивном режиме:



При клике для вызова в мобильном аппарате:



Установочный процесс:

В head

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
<header>
  <h2>ZORNET.RU</h2>
  <input class="aresponsive" id="navigation" type="checkbox"/>
  <label class="open" for="navigation">
    <i class="fa fa-bars"></i>
  </label>
  <nav>
    <ul>
      <li><a href="#">ГЛАВНАЯ</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">СКРИПТЫ</a></li>
      <li><a href="#">КОНТАКТЫ</a></li>
    </ul>
    <label class="navoneg" for="navigation">
      <i class="fa fa-times"></i>
    </label>
  </nav>
</header>

CSS

Код
header {
    min-height: 100px;
    background: linear-gradient(-45deg, #1376a9, #28946f);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 4px 0 rgba(21, 21, 21, 0.2);
}
.aresponsive{
  position: absolute;
  visibility: hidden;
  left: -9999px;
}
label{
  font-size: 30px;
  cursor: pointer;
  display: none;
}
ul{
  list-style-type: none;
  display: flex;
}
a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 15px;
  transition: .4s;
}
a:hover{
    color: #3498db;
  }

@media screen and (max-width:800px){
.open,.navoneg{
display: block;
max-width:800px;
}
.navoneg{
position: absolute;
top: 40px;
right: 40px;
}
.aresponsive:checked ~ nav{
right: 0;
}
nav{
position: fixed;
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #00537e, #3aa17e);
top: 0;
right: -100%;
text-align: center;
padding: 100px 0;
transition: .7s
}
ul{
flex-direction: column;
}  
a{
padding: 20px;
}     
a:hover{
background-color: rgba(255,255,255,.03);
}
}

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

Демонстрация
Прикрепления: 0822583.png(22.8 Kb) · 9896051.png(7.4 Kb) · 0496911.png(8.6 Kb) · css-menu.zip(3.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивное меню на чистом CSS3 (Как создать адаптивное меню навигации, используя только CSS)
  • Страница 1 из 1
  • 1
Поиск: