Дата: Понедельник, 2014-05-12, 2:31 PM | Сообщение # 1
Полковник
Генеральный штаб
Сообщений: 462
При создании меню сайта можно столкнуться с проблемой ограниченности пространства, необходимостью экономить место и избегать нагромождения лишней информации. Все это удобно решается элементами, которые скрываются, когда не нужны. Если хочется избежать использования скриптов, такое меню можно создать с помощью средств html и css.
Подробнее:
Инструкция
1
Составьте меню, определите его структуру. Расположите элементы в удобном для будущего пользователя порядке. Подумайте над понятными и грамотными названиями разделов. Определите пункты, которые должны быть выпадающими, и подпункты, которые будут в этих выпадающих списках.
2
Оформите придуманную структуру с помощью html-тэгов. Это будет выглядеть примерно следующим образом:
3
Поместите все меню в блок . Задайте идентификатор id, что позволит в дальнейшем присваивать особенности только этому блоку, не затрагивая остальные. Укажите в идентификаторе некое имя, свойства для которого опишите в следующих шагах. 4 Создайте списки, где - сам список, а - - каждая из его строк. Добавьте для всех будущих ссылкок, которые должны создавать выпадающее меню, свой список с подпунктами. Превратите названия пунктов меню в ссылки, заключив их в тэг . Присвойте его параметру href адрес страницы, на которую будет указывать ссылка.
5
Задайте свойства списка через css, внеся их в css-файл: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Задайте равными нулю отступы padding - отступ внутри и margin - отступ снаружи элемента списка. Укажите list-style - стиль маркированного списка, по умолчанию с точками, которые при значении none убираются. Введите ширину списка width.
6
Добавьте свойства элемента списка: #vmenu ul li { position:relative; }. Укажите параметр позиционирования, то есть расположения элементов position. Присвойте ему относительное значение relative, чтобы определять расположение выпадающего меню относительно изначального. Создаваемое меню будет вертикальным.
7
Укажите свойства для списка, расположенного в элементе другого списка: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Присвойте параметру позиционирования position значение absolute, чтобы осуществлять абсолютное позиционирование подменю относительно пункта меню. Задайте расположение с помощью отступа пространства слева left и сверху top. Определите параметр отображения элемента display как none, поскольку изначально выпадающий список не должен быть виден.
8
Внесите параметры для ссылок: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Присвойте параметру отображения display значение block, делающее элемент блочным. При этом он видимый и ведет себя, как блок. Задайте отступ padding, цвет текста ссылки color, цвет фона ссылки background, стиль ссылки text-decoration. Значением none убирает подчеркивание по умолчанию.
9
Задайте действие при наведении курсора: #vmenu li:hover ul { display: block; }. Укажите, что при наведении курсора на строку списка li, список ul, расположенный в нем, становится видимым.
10
Добавьте по желанию параметры цвета или изображения для фона, горизонтальные черты, шрифт ссылок и другие свойства, определяющие внешний вид меню.
Источникttp://www.kakprosto.ru/kak-114322-kak-sdelat-vypadayushchee-menyu-html#ixzz31UoaYN7u
|
.
