1:58
Автор: Рубрика: для вебмастера Комментариев нет

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

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

menyu

Эту проблему очень легко решить с помощью элементов, которые в ненужное вам время будут попросту скрыты. Если при этом вы не хотите использовать скрипты, то выпадающее меню помогут сделать средства html, css.

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

Теперь надо придуманную структуру оформить при помощи html-тэгов. Ссылки оформляйте так:

<ul> <li><a href="#">Первая ссылка.</a></li>, <li><a href="#">Вторая ссылка.</a> <ul> <li> и т.д. А пункты так: <li><a href="#">Пункт 2.1.</a></li> и т.д.

Теперь надо поместить меню в нужный блок, а именно – в <div>. Обязательно задайте идентификатор id – в будущем это поможет присвоить особенности одному конкретному блоку, чтобы не затрагивать прочие. В идентификаторе надо указать имя, его свойства описывайте в следующих шагах. Теперь создайте списки: <ul> — это список, <li> — строка каждого из списка. Для всех ссылок добавьте список с подпунктами. Названия пунктов надо превратить в ссылки – заключается в специальный тег <a>.

Через css задаются свойства списка. Внесите их в css-файл. Не забудьте задать отступы, равные нулю: margin – значение отступа снаружи, padding — отступ внутри элемента списка. А стиль маркированного списка (list-style) по умолчанию указывается с точками, при значении none они убираются. Не забудьте про ширину списка – width. Надо добавить и свойства элемента списка, вот так: #vmenu ul li { position:relative; }. Указывайте расположение элементов position. Ему требуется присвоить относительное значение relative. Будущее меню будет за счет этого вертикальным.

Советую прочесть  Система заработка на информационном сайте

Пропишите свойства для списка, который располагается в другом списке. Выглядит это так:

#vmenu li ul { position:absolute; left:250px; top:0; display:none; }.

Значение absolute для параметра позиционирования position. Параметр отображения display определяется как none, ведь выпадающий список должен быть невидим. Не забудьте про параметры для ссылок. Например, параметр отображения display должен иметь значение block (элемент получится блочным). Стиль ссылки text-decoration, цвет фона background, цвет текста, отступ – эти значения задайте на свое усмотрение.

При наведении курсора действие должно быть следующим: #vmenu li:hover ul { display: block; }. Когда курсор будет наводиться на строку списка li, то список в нем будет становиться видимым.

Горизонтальные черты, параметры цвета для фона, шрифты для ссылок – это уже добавляется по вашему вкусу. Вы сами определяете, каким будет внешний вид меню, которое при помощи html совсем несложно сделать, при наличии хотя бы базовых знаний этого языка программирования. А если ваш сайт будет наполнен качественным контентом и иметь удобную навигацию, то прилив уникальных посетителей вам обеспечен!

Материалы по теме:

Ссылочное ранжирование (СЕО). Часть 2-я
Правила тут простые, и действия относительно несложные. Однако от вебмастера, желающего стать профессионалом, потребуется максимум усидчивости, сообразительности и даже фантазии. Обычно новичкам вдалбливают в ...
Ссылочное ранжирование (СЕО). Часть 1-я
Для того чтобы быстро и без особенных проблем раскрутить свой первый сайт в Яндексе или Гугле, необходимы входящие ссылки с других сайтов, и с ...
Как правильно продвинуть свой сайт
Итак, создан замечательный сайт. Но если не заниматься его продвижением, то о нем так никто и не узнает. Надо приложить немало усилий в борьбе ...
Раскрутить новый сайт в поисковых системах
Здравствуйте, уважаемые читатели блога. Если задуматься о том, почему каждый день в тему СЕО приходит множество новичков, а в итоге опытных профессионалов из этой ...
Особенности продвижения сайта в социальных сетях
Здравствуйте, уважаемые читатели блога. Для тех, у кого есть свой собственный сайт, основной проблемой является его продвижение, то есть получение на него потока посетителей.
Советую прочесть  Внутренняя и внешняя оптимизация сайта
Хочешь получать статьи этого блога на почту?
Новые статьи блога
Комментариев нет

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: