@Voland0303
хочу стать программистом

Как создать навигацию как на макете?

помогите пожалуйста создать навигацию как на макете.и при наведении нав не прыгала5e4c0ce41ecf8326062374.png
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 5
@html-css
вам на фриланс
Ответ написан
@Vl001D
Есть же готовые решения, вот на пример:
https://codepen.io/nz4/pen/xVyvmz
https://codepen.io/nz4/pen/bpQGGL
https://codepen.io/nz4/pen/mPzNQZ

А дальше уже ручками можно допилить.

ГОТОВЫЙ КОД
<body>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">BLOG</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</body>


body {
  background-color: #86519d;
}

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  color:#fff; /*меняем цвет ссылок*/
  padding:10px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  border-radius:4px; /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#653a79;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы