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

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

Инструкция

Постойте для начала базовую строку меню. Создайте специальный нумерованный список с подменю в текстовом редакторе. Обычно для этих целей используют «Блокнот». Подменю выступает элементом родительского списка. К примеру: Первый элементВыпадающий элементВыпадающий элемент2Выпадающий элемент3Выпадающий элемент4Выпадающий элемент5

Данный список сохраните в отдельном html-файле. Затем создайте файл .css. Введите все необходимые параметры таблицы стилей. Делайте это очень внимательно, ведь одна ошибка, и всплывающее меню будет отображаться некорректно или вообще не будет работать.

Удалите все маркеры и отступы, применяемые в ненумерованном списке. Задайте ширину меню с помощью средств CSS:ul -style: none;width: 200px; }

Отметьте относительное положение всех элементов списка с помощью атрибута под названием position:ul li : relative; }

Затем оформите подменю, элементы которого будут появляться от родительского меню справа в момент, когда курсор мышки будет находиться над пунктом:li ul : absolute;left: 199px;top: 0;display: none; }

У атрибута left значение на один пиксель меньше, чем у ширины самого меню. Это позволяет правильно расположить всплывающие пункты без создания двойных границ. Атрибут display используется, чтобы при открытии страницы скрыть подменю.

Задайте необходимые стили для ссылок с помощью соответствующих параметров css. Подключите параметр display: block, чтобы ссылки занимали все отведенные для них места. Для того чтобы меню появлялось в момент, когда курсор мыши будет оказываться над ним (hover), введите такой код:li:hover ul : block; }

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

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