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

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

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

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

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

Адаптивная навигация при помощи HTML и CSS3

Проверяя по всем функциям, а также на адаптивность:

Горизонтальное адаптивное меню для сайта на HTML+CSS

Здесь вид с мобильного аппарата:

Создать отзывчивое меню с помощью CSS и HTML

И при клике появляется само основа с ключевыми фразами:

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

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

Это как в самой основе стилистике, так и по размерам, ну примеру сделать его шире. Где он на большом мониторе будет с одной прописанной шириной, а на мобильном сделать более уже или удобнее.

Установка:

Подключить шрифт в HEAD

Код

HTML

Код

<nav>
  <div class="nasvagun">ZORNET.RU</div>
  <input type="checkbox" id="click">
  <label for="click" class="navegatus-musad">
  <i class="fas fa-bars"></i>
  </label>
  <ul>
  <li><a href="#" class="kiledsa">Главная</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </nav>

CSS

Код

nav{
  display:flex;
  height:84px;
  width:100%;
  background:#000;
  align-items: center;
  justify-content:space-between;
  padding:0 50px 0 100px;
  flex-wrap: wrap;
}
nav .nasvagun{
  color:#fff;
  font-size:35px;
  font-weight:600;
}
nav ul{
  display:flex;
  flex-wrap: wrap;
  list-style-type: none;
}
nav ul li{
  margin:0 5px;
}
nav ul li a{
  color:#f2f2f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding:8px 15px;
  border-radius: 5px;
  letter-spacing:1px;
  border-bottom:1.5px solid transparent;
  transition:all 0.3s ease;
}
nav ul li a.kiledsa,
nav ul li a:hover{
  border-color:orange;
  color:orange;
}
nav .navegatus-musad i{
  color:#fff;
  font-size:22px;
  cursor: pointer;
  display:none;
}
input[type="checkbox"]{
  display:none;
}

@media (max-width:1000px){
  nav{
  padding:0 40px 0px 50px;
  }
}
@media (max-width:920px){
  nav .navegatus-musad i{
  display:block;
  }
  #click:Checked ~ .navegatus-musad i:before{
  content:'\f00d';
  }
  nav ul{
  position:fixed;
  top:84px;
  left:-100%;
  background:#111;
  height:100vh;
  width:100%;
  text-align: center;
  z-index:10;
  display:block;
  transition:all 0.3s ease;
  }
  #click:Checked ~ ul {
  left:0px;
  }
  nav ul li{
  width:100%;
  margin:40px 0;
  }
  nav ul li a{
  width:100%;
  margin-left:-100%;
  display:block;
  font-size: 20px;
  transition:0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:Checked ~ ul li a{
  margin-left:0px;
  }
}

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

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

12 Марта 2021 Загрузок: 2 Просмотров: 1344 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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