Статьи

Создание анимированного выпадающего меню навигации в HTML5 / CSS3 и Webkit

Декабрь 5, 2018

Это руководство для начинающих и средних разработчиков HTML5 и CSS3, которые хотят создать раскрывающееся меню. Меню, которое мы создаем, анимировано с использованием только CSS … JavaScript не видно!

Демонстрацию результатов этого урока можно найти здесь.

Мы установим наш HTML с помощью body Следующим шагом будет создание нескольких списков с href «#» и присвоение вашей ссылке класса «toplink». Внутри каждого из этих списков мы будем вкладывать неупорядоченный список, а затем три элемента списка для каждой ссылки навигации, включая ее ссылку. 

 <nav id="top">
  <ul>
    <li> <a class="toplink" href="#">Item One</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Two</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Three</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Four</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

На этом навигация завершена, но вы можете редактировать текст и ссылки для своих нужд.

На CSS

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

Сначала мы установим z-index (для суммирования), ширину, высоту строки, отступы и цвет фона для поля навигации (#top): 

 #top { 
  z-index: 2; 
  width: 200px; 
  line-height: 2em; 
  background: #222222; 
  padding: 30px; 
}

Затем мы возьмем список навигации и список ссылок и дадим им цвет и некоторые отступы, чтобы они помещались в свои собственные поля: 

  #top li li, #top li li a { 
  height:0px; 
  margin-top: -10px; 
  text-align: center; 
  color: rgba(255,255,255,.0); 
  text-decoration: none; 
  -webkit-transition:all .7s ease-in-out;
 }

Далее мы дадим выпадающим меню некоторые отступы, закругленную границу и эффект изменения цвета при наведении: 

  #top li:hover li { 
  height:40px; 
  margin-top:5px; 
  margin-bottom: 5px; 
  background: #333333; 
  border-radius: 20px; 
} 

#top li li:first-of-type { 
  padding-top: 15px; 
} 

#top li:hover li a { 
  color: rgba(255,102,0,.8); 
} 

#top li li a:hover { 
  color:#ffffff; 
}

Наконец, мы удалим маркеры из всех списков на странице и дадим ссылкам красивый оранжевый цвет, а также удалим их подчеркивания: 

  li { 
  list-style: none; 
} 

a { 
  color: orange; 
  text-decoration: none; 
}

После того, как вы закончили урок, вы можете оформить навигацию по своему вкусу! Это базовый пример, и вы можете маневрировать и переделывать его так, чтобы он соответствовал вашему веб-сайту.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. Есть вопрос по HTML? Почему бы не спросить об этом на наших форумах ?

40
Share: