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

2 ноября 2014 г. Просмотров: 414 Инструкции
С помощью грамотного 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 атрибут. Всплывающее меню готово к применению.
  • Оцените статью!