Совет 1: Как сделать всплывающее меню

При помощи грамотного кода HTML и несложных правил CSS можно создать неплохое всплывающее меню, которое можно будет легко изменять и дополнять. При использовании средств языка разметки и каскадных таблиц стилей можно обеспечить корректную работу меню во всех браузерах.
Инструкция
1
Для начала постройте базовую структуру вашего меню. Откройте текстовый редактор и создайте нумерованный список с подменю, которое выступает как элемент родительского списка. Например:
  • Первый элемент
    • Выпадающий элемент
    • Выпадающий элемент2
2
Сохраните созданный список в отдельном html-файле. Далее создайте файл с расширением .css и введите все параметры таблицы стилей.
3
Удалите все отступы и маркеры, которые применяются в ненумерованном списке, и задайте ширину меню при помощи средств CSS:ul { list-style: none;
width: 200px; }
4
Задайте относительное положение всех элементов списка при помощи атрибута position:ul li { position: relative; }
5
Далее необходимо оформить подменю, каждый из элементов которого будет появляться справа от родительского меню в тот момент, когда на пункте будет находиться указатель мыши:li ul { position: absolute;
left: 199px;
top: 0;
display: none; }Атрибут left имеет значение на один пиксель меньшее, чем ширина самого меню. Это позволяет грамотно расположить всплывающие пункты без создания двойных границ. Атрибут display используется для того, чтобы скрыть подменю при открытии страницы.
6
Задайте нужные стили для ссылок при помощи соответствующих параметров css. Включите параметр display: block для того, чтобы каждая ссылка занимала все отведенное для нее место.
7
Чтобы меню появлялось в тот момент, когда курсор окажется над ним (hover), нужно ввести код:li:hover ul { display: block; }
8
Задайте по желанию дополнительные параметры отображения ссылок и элементов списка.
9
Всплывающее меню готово. Теперь осталось включить в файл .html атрибут :Всплывающее меню

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

С помощью грамотного HTML-кода и простых правил CSS можно сделать всплывающее меню, дополнять его и изменять. Если использовать средства каскадных таблиц и языка разметки, можно во всех браузерах обеспечить корректную работу самого меню.
Инструкция
1
Постойте для начала базовую строку меню. Создайте специальный нумерованный список с подменю в текстовом редакторе. Обычно для этих целей используют «Блокнот». Подменю выступает элементом родительского списка. К примеру: Первый элементВыпадающий элементВыпадающий элемент2Выпадающий элемент3Выпадающий элемент4Выпадающий элемент5
2
Данный список сохраните в отдельном html-файле. Затем создайте файл .css. Введите все необходимые параметры таблицы стилей. Делайте это очень внимательно, ведь одна ошибка, и всплывающее меню будет отображаться некорректно или вообще не будет работать.
3
Удалите все маркеры и отступы, применяемые в ненумерованном списке. Задайте ширину меню с помощью средств CSS:ul -style: none;width: 200px; }
4
Отметьте относительное положение всех элементов списка с помощью атрибута под названием position:ul li : relative; }
5
Затем оформите подменю, элементы которого будут появляться от родительского меню справа в момент, когда курсор мышки будет находиться над пунктом:li ul : absolute;left: 199px;top: 0;display: none; }
6
У атрибута left значение на один пиксель меньше, чем у ширины самого меню. Это позволяет правильно расположить всплывающие пункты без создания двойных границ. Атрибут display используется, чтобы при открытии страницы скрыть подменю.
7
Задайте необходимые стили для ссылок с помощью соответствующих параметров css. Подключите параметр display: block, чтобы ссылки занимали все отведенные для них места. Для того чтобы меню появлялось в момент, когда курсор мыши будет оказываться над ним (hover), введите такой код:li:hover ul : block; }
8
По желанию задайте дополнительные параметры для отображения элементов списка и ссылок. Включите в файл .html атрибут. Всплывающее меню готово к применению.
Видео по теме
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500