Задать вопрос
Ответы пользователя по тегу HTML
  • Как создать навигацию как на макете?

    @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; /*Добавляем отступ у пунктов меню*/
    }
    Ответ написан
    1 комментарий