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

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

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

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

HTML

<header>
  <div class="korganized-ousebtev">
    <div class="mostumpon-kanetumok">
      <a href="/">
        <img src="http://icons.iconarchive.com/icons/gianni-polito/colobrush/72/software-firefox-icon.png">
      </a>
    </div>
    <nav>
    <ul>
      <li><a href="">Главная</a></li>
      <li><a href="">CSS</a></li>
      <li><a href="">HTML</a></li>
      <li><a href="">SEO</a></li>
      <li><a href="">КОНТАКТЫ</a></li>
   </ul>
  </nav>
  </div>
</header>

CSS

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

header {
    padding: 15px 0;
    background: repeating-linear-gradient(45deg, #efeeee, #f3f5f0 20px, #f3f3f3 20px, #f1f1f1 40px);
    box-shadow: 0 3px 16px 1px rgba(0, 0, 0, 0.37);
}

.korganized-ousebtev {
    padding: 0 15px;
    max-width: 985px;
    margin: 0 auto;
}

.mostumpon-kanetumok {
  float: left;
  margin-right: 15px;
}
.mostumpon-kanetumok a {
  outline: none;
  display: block;
}
.mostumpon-kanetumok img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
nav li {
  display: inline-block;
  margin-left: 20px;
  height: 75px;
  line-height: 75px;
  transition: .7s linear;
}

nav a {
    text-decoration: none;
    display: block;
    position: relative;
    color: #6f6969;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
}

nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 15px;
  background: #868686;
  transition: width .7s linear;  
}
nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  header {text-align: center;}
  .mostumpon-kanetumok {
    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: 39px;
  line-height: 39px;
}
nav li:hover {background: rgba(19, 18, 18, 0.1);}
nav a:after {content: none;}
}

[center][/center]