Как создать выпадающее меню с помощью HTML и CSS

Выпадающее меню может создать четкое и иерархическое представление всех основных разделов. Вы можете создать выпадающее меню с HTML раскрывающимся списком, не используя ничего, кроме языка гипертекста и CSS.

Часть 1

Составление HTML

Как создать выпадающее меню при помощи HTML и CSS
  1. Создание раздела навигации. Как правило, мы используем для главной панели навигации веб-сайта тег <nav>, <header> — для более узких разделов или <div>, если нет иных вариантов. Поместите этот код в элемент <div>, чтобы можно без труда было задать стили для всего меню:
<div> <nav> </nav></div>
Как создать выпадающее меню при помощи HTML и CSS
  1. Задайте для каждого раздела название класса. Мы будем использовать атрибут класса позже, чтобы определить стиль данных элементов при помощи CSS. Задайте названия классов для контейнера и меню с раскрывающимся списком HTML:
<div class="nav-wrapper"><nav class="nav-menu"></nav></div>
Как создать выпадающее меню при помощи HTML и CSS
  1. Добавьте список пунктов меню. Неупорядоченный список(<ul>) включает пункты главного меню(<li>), на которые посетители будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к данному позже в разделе CSS:
<div class="nav-wrapper"> <nav class="nav-menu"><ul class="clearfix"> <li>Home</li> <li>Contributors</li>   <li>Contact Us</li> </ul>   </nav></div>
Как создать выпадающее меню при помощи HTML и CSS
  1. Добавление ссылок. Сейчас необходимо добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор( к примеру, «#!»), чтобы курсор посетителя менял внешний вид при наведении на них. В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:
<div class="nav-wrapper">   <nav class="nav-menu">      <ul class="clearfix">       <li><a href="/">Home</a></li>         <li><a href="/Contributors">Contributors</a>         </li>         <li><a href="#!">Contact Us</a>         </li>      </ul>   </nav> </div>
Как создать выпадающее меню при помощи HTML и CSS
  1. Создание списков вложенных элементов. После того, как мы установим стили, данные раскрывающиеся списки HTML станут выпадающими меню. Вложите список в элемент, на который посетитель будет наводить курсор. Задайте имя класса и ссылку, как мы делали ранее:
<div class="nav-wrapper">   <nav class="nav-menu">      <ul class="clearfix">         <li><a href="/">Home</a></li>         <li><a href="/Contributors">Contributors</a>         <ul class="sub-menu">            <li><a href="/jordan">Michael Jordan</a></li>            <li><a href="/hawking">Stephen Hawking</a></li>         </ul>         </li>         <li><a href="#!">Contact Us</a>         <ul class="sub-menu">            <li><a href="mailto:bugsupport@company.com">Report a Bug</a></li>            <li><a href="/support">Customer Support</a></li>         </ul>         </li>      </ul>   </nav></div>

Часть 2

Составление CSS

Как создать выпадающее меню при помощи HTML и CSS
  1. Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы ещё этого не сделали. В данной статье мы не будем касаться основных свойств CSS, таких как параметр шрифта и цвет фона:
Как создать выпадающее меню при помощи HTML и CSS
  1. Добавьте код clearfix. Помните класс « clearfix «, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать иные элементы. Несложная параметр CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:
.clearfix:after {content: "";display: table;}
Как создать выпадающее меню при помощи HTML и CSS
  1. Создание базовой структуры. Представленный ниже программный код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который может сосредоточиться на иных элементах раскрывающегося свертывающегося списка HTML. Вы можете позже расширить его дополнительными свойствами CSS, такими как отступы и интервалы:
.nav-wrapper {   width:100%;   background: #999;}.nav-menu {   position:relative;   display:inline-block;}.nav-menu li {   display: inline;   list-style-type: none;}.sub-menu {   position:absolute;   display:none;   background: #ccc;}
Как создать выпадающее меню при помощи HTML и CSS
  1. Задаем отображение выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется отображение вложенного списка при наведении курсора мыши на родительский элемент:
.nav-menu ul li:hover > ul {   display:inline-block;}

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы планируете задать стиль только для выпадающих меню первого уровня, используйте вместо этого « .nav-menu > ul «:

Как создать выпадающее меню при помощи HTML и CSS
  1. Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент включает вложенное выпадающее меню, при помощи стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:
.nav-menu > ul > li:after {   content: "25BC"; /*escaped unicode for the down arrow*/   font-size:.5em;   display: inline;   position: relative;   }

Настроить положение стрелки можно при помощи свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте ещё один класс(к примеру, dropdown) для каждого элемента li, к которому необходимо добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

Как создать выпадающее меню при помощи HTML и CSS
  1. Параметр отступов, фона и иных свойств . Сейчас наше меню будет функциональным, но мы можем пару улучшить его внешний вид при помощи редактирования кода CSS .

Подсказки

  • Если вы планируете добавить выпадающее меню в форму, HTML 5 может запросто сделать это при помощи элемента ;
  • Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно легко настроить внешний вид курсора при помощи CSS .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *