Как сделать меню в css

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

В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 46 388.

В этой статье:

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

• В Notepad++ сначала откройте меню «Язык» вверху окна и выберите в нем «HTML».

Введите заголовок документа. Это код, который определяет тип кода, используемый в остальной части документа:

 html> head> style> 

Создайте выпадающее меню. Введите следующий код, чтобы задать размер и цвет меню. Вместо «#» введите нужную цифру (чем больше цифра, тем больше меню). Также в строках «background-color» и «color» можно подставить название нужного цвета или его HTML-код: [1] X Источник информации

.dropbtn  background-color: black; color: white; padding: #px; font-size: #px; border: none; > 

Укажите, что в меню будут присутствовать опции. Так как опции будут добавлены позже, поместите их в меню, введя следующий код:

.dropdown  position: relative; display: inline-block; > 

Настройте внешний вид выпадающего меню. Следующий код задаст размер меню, его положение, когда затрагиваются другие элементы веб-страницы, и цвет. В строке «min-width» вместо «#» подставьте нужную цифру (например, 250), а в строке «background-color» — название нужного цвета или его HTML-код:

.dropdown-content  display: none; position: absolute; background-color: lightgrey; min-width: #px; z-index: 1; > 

Добавьте информацию о содержимом выпадающего меню. Следующий код задает цвет текста и размер кнопки меню. Вместо «#» подставьте число (в пикселях), чтобы задать размер кнопки:

.dropdown-content a  color: black; padding: #px #px; text-decoration: none; display: block; > 

Укажите, как будут меняться цвета меню, когда пользователь наведет на него курсор мыши. В первой строке «background-color» указывается цвет, в который окрасится выбранная опция, а во второй строке «background-color» цвет, в который окрасится кнопка выпадающего меню. В идеале эти цвета должны быть светлее, чем цвета опций и кнопки, когда курсор не наведен на них.

.dropdown-content a:hover background-color: white;> .dropdown:hover .dropdown-content display: block;> .dropdown:hover .dropbtn background-color: grey;> 

Закройте раздел CSS. Для этого введите следующий код:

style> head> 

Укажите имя выпадающего меню. Введите следующий код, где «Name» замените на слово (например, «Меню»), которое отобразится на кнопке меню.

div class="dropdown"> button class="dropbtn">Namebutton> div class="dropdown-content"> 

Добавьте опции меню. Каждая опция меню должна ссылаться на что-либо, например, на страницу вашего или другого веб-сайта. Чтобы добавить опции в меню, введите следующий код, где вместо https://www.website.com подставьте адрес страницы (кавычки не удаляйте), а вместо «Name» подставьте название опции.

a href="https://www.website.com">Namea> a href="https://www.website.com">Namea> a href="https://www.website.com">Namea> 

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

div> div> body> html> 

Просмотрите код выпадающего меню. Код должен выглядеть примерно так: [2] X Источник информации

 html> head> style> .dropbtn  background-color: black; color: white; padding: 16px; font-size: 16px; border: none; > .dropdown  position: relative; display: inline-block; > .dropdown-content  display: none; position: absolute; background-color: lightgrey; min-width: 200px; z-index: 1; > .dropdown-content a  color: black; padding: 12px 16px; text-decoration: none; display: block; > .dropdown-content a:hover background-color: white;> .dropdown:hover .dropdown-content display: block;> .dropdown:hover .dropbtn background-color: grey;> style> head> div class="dropdown"> button class="dropbtn">Social Mediabutton> div class="dropdown-content"> a href="https://www.google.com">Googlea> a href="https://www.facebook.com">Facebooka> a href="https://www.youtube.com">YouTubea> div> div> body> html> 

• Всегда проверяйте код, прежде чем размещать его на своем веб-сайте.
• Описанные здесь методы предназначены для создания выпадающего меню, которое открывается, если навести на него курсор мыши. Чтобы создать выпадающее меню, которое открывается, если щелкнуть по нему, воспользуйтесь JavaScript. [3] X Источник информации

Предупреждения

• Набор HTML-цветов довольно ограничен, если использовать их названия, например, «black» (черный) или «green» (зеленый). На этой странице есть генератор кодов HTML-цветов, с помощью которого можно найти код любого цвета.

На создание профессиональных меню больше не требуется код и время благодаря CSS3. Используя бесплатную программу CSS3Menu, можно создать прекрасные кнопки, основанные только на CSS3, за несколько кликов.

Обзор

CSS3 меняет технологию создания вебсайтов. Хотя многие не хотят начинать использовать CSS3 из-за отсутствия поддержки в некоторых браузерах, есть те, кто идет вперед и создает удивительные вещи с помощью потрясающих возможностей CSS3. Больше не нужно полагаться на скрипты и картинки, чтобы создать стильные элементы для вебсайта, такие как кнопки и меню.

Вы можете создать современное меню без Javascript и картинок, эффективно используя новые CSS3 свойства: радиус границы и анимацию. Это меню прекрасно работает с Firefox, Opera, Chrome и Safari. Выпадающее меню работает также в браузерах, которые не поддерживают CSS3, таких как ИЕ7+, но закругленные углы и тени не будут отображаться. Эффекты CSS3 однажды заменят всю jQuery анимацию, которую используют дизайнеры.

Особенности меню

• Javascript не требуется
  Работает в браузерах с отключенным скриптом, или если браузер не поддерживает Javascript вообще.
• Адаптивное меню
  Меню легко адаптируется к устройству, с которого его просматривают. Смотреть адаптивное демо.
• Дружественное к SE
  Дружественное к поисковым системам и текстовым браузерам.
• Поддержка браузеров
  Работает во всех современных браузерах (в ИЕ6 доступен только верхний уровень меню).
• Поддержка устройств
  Работает на всех современных устройствах (iPhone, iPad, Android, Blackberry, Windows Phone).
• Графический интерфейс
  Графический интерфейс позволяет создавать меню без сложного программирования вручную. Используйте окно предварительного просмотра, чтобы следить за внешним видом Вашего меню во время его создания и настройки.
• Дизайн, основанный на 100%-ом CSS
  Меню основано только на HTML списке ссылок (UL/LI структура) и CSS. Никакие дополнительные не CSS параметры не используются.
• Великолепные CSS3 свойства
  Многоуровневое выпадающее меню создано с использованием Закругленных углов CSS3 (CSS3 border-radius), Тени CSS3 (box-shadow и css3 text-shadow).
  Прозрачность, фон и цвета шрифтов, линейный градиент и радиальный CSS3 градиет также доступны.
  CSS3 эффекты для выпадающего меню Выцветание, Слайд и т.д.
• Мега-меню с многоколоночным подменю
  Создавайте Мега-меню с многоколоночными подменю. Указывайте количество строк, которое хотите иметь.
• Маленький размер
  Мгновенная загрузка меню. Не использует дополнительные файлы.

Получить полную версию

Плата требуется для использования в коммерческих целях. Бизнес версия CSS3Menu дополнительно предоставляет опцию для создания многоколоночного меню и включает расширенные наборы шаблонов меню и иконок.

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

• Загрузить бесплатную версию
  для Windows & Mac
• Загрузить коммерческую версию
  для Windows & Mac — $59

Помощь

Смотри также:

Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu, нажмите кнопки «Добавить элемент» и «Добавить подменю» , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку «Удалить элемент» , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке «Шаблоны». Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Главное меню».
3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Подменю».

4) Сохранение меню.
4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку «Сохранить» , расположенную на панели инструментов или выберите пункты «Сохранить» или «Сохранить. » в главном меню.
4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку «Опубликовать» на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.
E-mail:

CSS3 Menu v3.5 (Jan 23, 2013)
Read more

CSS3 Menu v3.1 (Jul 3, 2012)

CSS3 Menu v2.3 (Feb 2, 2012)

Меню навигации на HTML и CSS

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

Как сделать вертикальное меню:

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

Header

Content

Тут всё понятно, единственное, что смущает, это тег , он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

Тег нужно использовать для навигации, что бы лучше индексировался ваш сайт.

, что бы сделать меню.

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

border : black 2px solid ;
display : inline-block ;
width : 200px ;
border : black 2px solid ;
margin-right : 10px ;
padding : 10px 20px ;
float : left ;
main nav ul < padding : 0 ; main nav ul li < list-style-type : none ; main .content < display : inline-block ; width : 500px ; border : black 2px solid ; float : left ;

Как можете заметить для тега и с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.

Примечание:

В современных проектах не используется блочно строчные элементы и float , сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Конечно, выглядит это не очень, но главное здесь передать саму суть, как сделать вертикальное меню, вам просто надо использовать блочно строчные элементы и float .

Как сделать горизонтальное меню:

Теперь перейдём к самому интересном, это то как сделать горизонтальное меню в HTML и CSS, суть примерно такая же, как и с первым случаем, но тут буду уже использовать FlexBox.

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.