Содержание

• Шагать
• Часть 1 из 2: Написание HTML
• Часть 2 из 2: Написание CSS
• Советы

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

Шагать

Часть 1 из 2: Написание HTML

1. Создайте свой раздел навигации. Обычно вы используете nav> для панели навигации всего веб-сайта, header> для небольших разделов ссылок, привязанных к странице, или div>, если другой вариант не подходит. Поместите это в элемент div>, чтобы вы могли настроить стиль как контейнера, так и самого меню.
   • div>
   • навигация>
   • / nav>
   • / div>
2. Дайте каждому разделу атрибут класса. Позже мы будем использовать атрибут class, чтобы изменить стиль этих элементов с помощью CSS. Дайте и контейнеру, и меню свой собственный атрибут класса.
   • div>
   • навигация>
   • / nav>
   • / div>
3. Добавьте список пунктов меню. Неупорядоченный список (ul>) содержит элементы главного меню (элементы списка li>), если пользователь наведет на него указатель мыши, он увидит выпадающие меню. Добавьте класс «clearfix» в свой элемент списка; мы вернемся к этому позже в таблице CSS.
   • div>
   • навигация>
   •       ul>
   •          li> Главная / li>
   •          li> Сотрудники
   •          li> Контакты
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Добавьте ссылки. Если эти пункты меню верхнего уровня также ссылаются на свои собственные страницы, теперь вы можете вставить ссылки. Ссылка на несуществующий якорь (например, «#!»). Даже если они ни на что не ссылаются, курсор пользователя будет выглядеть иначе. В этом примере контакт никуда не ведет, но два других пункта меню ведут себя:
   • div>
   • навигация>
   • ul>
   • li>a href = "/">Дом/ а>/ li>
   • li>a href = "/ Сотрудники">Штатные сотрудники/ а>
   • / li>
   • li>a href = "#!">Контакт/ а>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Создайте подсписки для раскрывающихся элементов. После создания стиля эти списки образуют раскрывающееся меню. Поместите список в элемент списка, на который наведет курсор мыши. Как и раньше, добавьте атрибут класса и ссылку.
   • div>
   • навигация>
   • ul>
   • li> a href = "/"> Home / a> / li>
   • li> a href = "/ Сотрудники"> Сотрудники / a>
   •          ul>
   •             li> a href = "/ borsato"> Марко Борсато / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Связаться / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Сообщить о проблеме / a> / li>
   •             li> a href = "/ support"> Служба поддержки / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Часть 2 из 2: Написание CSS

1. Откройте вашу таблицу стилей CSS. Разместите ссылку на свою таблицу стилей CSS в разделе заголовка HTML-документа, если ссылки еще нет. В этой статье мы не будем рассматривать основы CSS, такие как установка шрифта и цвета фона.
2. Добавьте код очистки. Помните, как добавляли класс «clearfix» в список меню? Обычно элементы раскрывающегося меню имеют прозрачный фон, который позволяет перемещать другие элементы. Простая адаптация к CSS может решить эту проблему. Вот хорошее и быстрое исправление, хотя оно не работает в Internet Explorer 7 и более ранних версиях:
   • .clearfix: after {
   • содержание: "";
   • дисплей: таблица;
   • }
3. Создайте базовый дизайн. С помощью этого кода вы можете разместить свое меню вверху страницы и скрыть выпадающие элементы. Это сделано очень просто, чтобы мы могли сосредоточиться на соответствующем коде. Вы можете изменить его позже с помощью дополнительного кода CSS, такого как отступы и поля.
   • .nav-wrapper {
   • ширина: 100%;
   • фон: # 008B8B;
   • }
   •  
   • .nav menu {
   • положение: относительное;
   • дисплей: встроенный блок;
   • }
   •  
   • .sub menu {
   • позиция: абсолютная;
   • дисплей: нет;
   • фон: # 555;
   • }
4. Сделайте так, чтобы выпадающие элементы появлялись при наведении на них указателя мыши. Элементы в раскрывающемся списке теперь настроены так, что они не отображаются. Вот как сделать так, чтобы весь подсписок появлялся при наведении курсора на «родительский»:
   • .nav-menu ul li: hover> ul {
   • дисплей: блок;
   • }
   • Примечание. Если дополнительные меню скрыты в элементах меню в раскрывающемся меню, добавленные здесь свойства будут применяться ко всем меню. Если вы хотите, чтобы стиль применялся только к первому уровню раскрывающихся меню, используйте вместо этого «.nav-menu> ul».
5. Укажите стрелкой, что есть раскрывающееся меню. Веб-дизайнеры обычно показывают стрелкой вниз, что элемент открывает раскрывающееся меню. Этот код добавляет эту стрелку к каждому элементу вашего меню:
   • .nav menu> ul> li: after {
   • содержание: « 25BC»; / * экранированный юникод для стрелки вниз * /
   • размер шрифта: .5em;
   • дисплей: блок;
   • позиция: абсолютная;
   •    }
   • Примечание. Отрегулируйте положение стрелки с помощью свойств top, bottom, right или left.
   • Примечание. Если не все элементы вашего меню имеют раскрывающиеся списки, не изменяйте внешний вид всего навигационного меню класса. Вместо этого добавьте еще один класс (например, раскрывающийся список) к каждому элементу li, на котором вы хотите установить стрелку. Обратитесь к этому классу в приведенном выше коде.
6. Настройте отступы, фон и другие свойства. Меню должно работать, но пока не очень. С помощью свойств в CSS вы можете настроить внешний вид каждого класса или элемента и их расположение.

Советы

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