Nav в html, стилизация nav меню

168

28 августа 2018, 09:10

Всем доброго времени суток.

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

Я так понимаю, здесь должен быть один общий ul со множеством вложенных li и dropdown menu,

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

Главный вопрос состоит в том, как выровнять меня полностью по центру блока (height, weight) и как можно сделать контакты друг под другом (номер и адрес) в едином ul или li, так чтобы они были по центру.

Буду очень рад вашей помощи коллеги.

Answer 1

Примерно так, дальше где что то не помешается стилизовать на соответствующих разрешениях, @media в помощь .. http://webref.ru тоже поможет разобраться

смотреть на всю страницу

разумеется что значки я брал с font-awesome от фанаря ... не искал такие же

так же на ru.stackoverflow.com поле search при фокусе занимает место до логотипа да и сам логотип выполнен в SVG - нету времени в точности делать как на этом сайте

https://jsfiddle.net/t5mxn9s1/28/ - здесь мои попытки

* { 
  margin: 0; 
  padding: 0; 
} 
 
img { 
  display: inline-block; 
  vertical-align: middle; 
} 
 
.fixed { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  border-bottom: 2px solid orange; 
  background: #fbfbfb; 
} 
 
.container { 
  width: 1024px; 
  margin: auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 14px; 
  height: 50px; 
} 
 
span, 
i, 
b { 
  vertical-align: middle; 
  margin: 2px; 
} 
 
b { 
  display: inline-block; 
  transform: translateY(-10px); 
  font-weight: bold; 
  font-size: 2em; 
  color: orange; 
} 
 
@media (max-width:1024px) { 
  .container { 
    max-width: 800px; 
  } 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="fixed"> 
  <div class="container"> 
    <span> 
      <i class="fa fa-stack-overflow" aria-hidden="true"></i> 
      stackoverflow 
    </span> 
    <nav> 
      <a href="">issues</a> 
      <a href="">tags</a> 
      <a href="">participants</a> 
    </nav> 
    <div class="search"> 
      <form action=""> 
        <input type="search"> 
      </form> 
    </div> 
    <div class="releated"> 
      <span> 
        <img src="http://placehold.it/30x30/c0c" alt=""><i>3000</i> 
      </span> 
      <span class="ratio"> 
        <i><b>.</b> 1</i> 
        <i><b>.</b> 11</i> 
        <i><b>.</b> 46</i> 
      </span> 
      <span><i class="fa fa-grav" aria-hidden="true"></i></span> 
      <span><i class="fa fa-envelope-open" aria-hidden="true"></i></span> 
      <span><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i></span> 
      <span><i class="fa fa-binoculars" aria-hidden="true"></i></span> 
      <span><i class="fa fa-code" aria-hidden="true"></i></span> 
    </div> 
  </div> 
</div>

Answer 2

Вот мой вариант. Если для кросбаузерности надо.

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
.wrapper { 
  width: 1090px; 
  margin: 0 auto; 
  outline: 1px solid black; 
  height: 100vh; 
  display: table; 
} 
 
header { 
  display: table; 
  position: fixed; 
  background-color: #fafafb; 
  width: 100%; 
  height: 1px; 
  padding: 0 1rem; 
  box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1); 
} 
 
.header { 
  display: table-cell; 
} 
 
.logo { 
  background: url('https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=f508971f422f'); 
  height: 38px; 
  width: 150px; 
  margin-top: 2px; 
  margin-left: 0; 
  background-position: 0 -495px; 
  display: table-cell; 
  margin-right: 1.5rem; 
  vertical-align: middle; 
} 
 
.menu { 
  display: table-cell; 
  vertical-align: middle; 
  padding-left: 1.5rem; 
} 
 
.menu-item+.menu-item { 
  margin-left: 1rem; 
} 
 
.menu-item { 
  display: table-cell; 
  padding: 1rem .5rem; 
} 
 
.menu-item:hover { 
  background-color: #eff0f1; 
} 
 
a.menu-item { 
  color: #535a60; 
  text-decoration: none; 
} 
 
.search { 
  display: table-cell; 
  vertical-align: middle; 
  padding-left: 1.5rem; 
  position: relative; 
  width: 300px; 
} 
 
input { 
  padding: .5rem; 
  border-width: 1px; 
  border-color: #c8ccd0; 
  border-radius: 3px; 
  width: 100%; 
  font-size: 14px; 
  background-color: #FFF; 
  box-shadow: none; 
  color: #3b4045; 
} 
 
input:hover, 
input:active, 
input:visited { 
  position: relative; 
  border-color: rgba(0, 149, 255, 0.5); 
  box-shadow: inset 0 1px 2px #e4e6e8, 0 0 2px rgba(0, 149, 255, 0.2); 
  box-shadow: none; 
}

<div class="warapper"> 
  <header> 
    <div class="header"> 
      <a href="/" class="logo"></a> 
      <div class="menu"> 
        <a href="/" class="menu-item">Вопросы</a> 
        <a href="/" class="menu-item">Метки</a> 
        <a href="/" class="menu-item">Участники</a> 
      </div> 
      <div class="search"> 
        <input class="input-search" type="search" value="Поиск..."> 
      </div> 
    </div> 
  </header> 
</div>