Как сделать выпадающее меню html?

2 ноября 2014 г.

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

Инструкция

Составьте меню, определите его структуру. Расположите элементы в удобном для будущего пользователя порядке. Подумайте над понятными и грамотными названиями разделов. Определите пункты, которые должны быть выпадающими, и подпункты, которые будут в этих выпадающих списках.

Оформите придуманную структуру с помощью html-тэгов. Это будет выглядеть примерно следующим образом:

Ссылка 1.
Ссылка 2.
- Пункт 2.1.
- Пункт 2.2.
- Пункт 2.3.
Ссылка 3.
- Пункт 3.1.
- Пункт 3.2.
- Пункт 3.3.
- Пункт 3.4.

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

Создайте списки, где

- каждая из его строк. Добавьте для всех будущих ссылкок, которые должны создавать выпадающее меню, свой список с подпунктами. Превратите названия пунктов меню в ссылки, заключив их в тэг . Присвойте его параметру href адрес страницы, на которую будет указывать ссылка.
Задайте свойства списка через css, внеся их в css-файл: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Задайте равными нулю отступы padding - отступ внутри и margin - отступ снаружи элемента списка. Укажите list-style - стиль маркированного списка, по умолчанию с точками, которые при значении none убираются. Введите ширину списка width.
Добавьте свойства элемента списка: #vmenu ul li { position:relative; }. Укажите параметр позиционирования, то есть расположения элементов position. Присвойте ему относительное значение relative, чтобы определять расположение выпадающего меню относительно изначального. Создаваемое меню будет вертикальным.
Укажите свойства для списка, расположенного в элементе другого списка: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Присвойте параметру позиционирования position значение absolute, чтобы осуществлять абсолютное позиционирование подменю относительно пункта меню. Задайте расположение с помощью отступа пространства слева left и сверху top. Определите параметр отображения элемента display как none, поскольку изначально выпадающий список не должен быть виден.
Внесите параметры для ссылок: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Присвойте параметру отображения display значение block, делающее элемент блочным. При этом он видимый и ведет себя, как блок. Задайте отступ padding, цвет текста ссылки color, цвет фона ссылки background, стиль ссылки text-decoration. Значением none убирает подчеркивание по умолчанию.
Задайте действие при наведении курсора: #vmenu li:hover ul { display: block; }. Укажите, что при наведении курсора на строку списка li, список ul, расположенный в нем, становится видимым.
Добавьте по желанию параметры цвета или изображения для фона, горизонтальные черты, шрифт ссылок и другие свойства, определяющие внешний вид меню.

Инструкция

Зарегистрируйтесь на сайте purecssmenu.com, иначе не сможете скачать созданное меню. Нажмите кнопку Templates в левой стороне страницы. Ниже вы увидите несколько маленьких окошек с шаблонами выпадающих меню, нажав на которые, загрузится предпросмотр справа в окошке Preview. Выберите шаблон, подходящий для вашего сайта.
Настройте шрифт и цвет меню: для используйте вкладку Parameters. В поле Font выберите шрифт, размер шрифта, если нужно, - подчеркивание (underline) и выделение жирным (bold). В поле Colors настройте фон меню (background), цвет шрифта (font), а также цвет шрифта (font hover) и цвет фона (background hover) при наведении курсора.
Откройте вкладку Items, чтобы управлять пунктами меню. Если вы нажмете кнопку корзины Clear, примеры пунктов очистятся и вы сможете создать свои. Для этого нажмите кнопку с плюсом Add Item - пункт будет добавлен в конец меню. Кнопка Add Next Item служит для того, чтобы добавить пункт, следующий после выделенного в данный момент времени. Кнопка Add Subitem создает вложенный пункт меню для выделенного. Соответственно, чтобы удалить какой-то пункт, используйте кнопку Remove Item.
Обратите внимание на поле Item Parameters (параметры пункта) внизу сайта. В строке Text укажите название пункта меню, в строке Link - url страницы, на которую будет вести данный пункт. В строке Tip вы можете оставить описание пункта, которое будет показываться при наведении курсора на ссылку. Строка Target предназначена для определения способа открытия страницы, на которую ведет ссылка. Параметр _self в этой строке открывает страницу в том же окне браузера, что и текущая.
Закончив настройку меню, скачайте его - нажмите кнопку Download справа внизу страницы (эта функция доступна после регистрации на сайте). Выберите папку на жестком диске, куда будет сохранен файл архива. Распакуйте его. Нужный код из файла purecssmenu.html вам надо будет скопировать в файл шаблона CSS вашего сайта. Откройте файл purecssmenu.html с помощью текстового редактора и скопируйте код, заключенный между тегами и , в CSS шаблон своего сайта (этот файл имеет расширение .css и выглядит примерно как file.css). Теперь вставьте код в файл шаблона сайта (темы) - код из purecssmenu.html между комментариями и вместо кода обычного меню. Для этого вам нужно хотя бы немного ориентироваться в программировании. Убедитесь, что вставили код в нужный файл, и сохраните.

joomla вертикальное выпадающее меню

Оцените статью!

Также читайте: