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

Отзывчивое меню с логотипом на HTML + CSS

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

Формат изначально создавался для светлого фона, где не зря прописаны тени, что гармонично вписываются в основной дизайн. Также есть оригинальный эффект подчеркивание ключевых слов. Если на стандартном сразу оно появляется. То здесь идет с левой стороны, где как только наводите на значение, то плавно появится полоса в 2 пикселя, что уже сам веб-разработчик выставляет по значению, как ему виднее или как посчитает нужным выставить.

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

Проверяя материал на работоспособность, где так при заходе на сайт открывается вид.

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

Здесь уже вид с экрана, возможно смартфон, но это не надолго, так как стразу идет переключение.

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

Приступаем к установке:

HTML

Код

<header>
  <div class="daneste-adusing-keydsike">
  <div class="vestesea-volumesemd">
  <a href="/">
  <img src="http://zornet.ru/ABVUN/Anisa/software-firefox-icon.png">
  </a>
  </div>
  <nav>
  <ul>
  <li><a href="">Главная</a></li>
  <li><a href="">CSS</a></li>
  <li><a href="">ZORNET.RU</a></li>
  <li><a href="">SEO</a></li>
  <li><a href="">КОНТАКТЫ</a></li>
  </ul>
  </nav>
  </div>
</header>

CSS

Код

header {
  padding: 20px 0;
  background: repeating-linear-gradient(45deg, #ebefe8, #eaeaea 20px, #efede8 20px, #efedea 40px);
  box-shadow: 0 1px 10px 3px rgba(39, 38, 38, 0.51);
}
.daneste-adusing-keydsike {
  padding: 0 20px;
  max-width: 960px;
  margin: 0 auto;
}
.vestesea-volumesemd {
  float: left;
  margin-right: 20px;
}
.vestesea-volumesemd a {
  outline: none;
  display: block;
}
.vestesea-volumesemd img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
nav li {
  display: inline-block;
  margin-left: 25px;
  height: 70px;
  line-height: 70px;
  transition: .5s linear;
}
nav a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #827a7a;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
}
nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 15px;
  background: #868686;
  transition: width .5s linear;
}
nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  header {text-align: center;}
  .vestesea-volumesemd {
  float: none;
  display: inline-block;
  margin: 0 0 16px 0;
  }
  ul {float: none;}
  nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
  display: block;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}

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

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

07 Декабря 2018 Загрузок: 2 Просмотров: 960 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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