Не имеет значение, горизонтальное или вертикальное меню, но оно является основным элементов Интернет-ресурса. Кто-то отдает предпочтение горизонтальному, а кому то нравится вертикальное. В этой ситуации играет роль вкуса и в связи с желаниями и вкусами, часто сталкиваешься с вопросом: как сделать простое выпадающее меню?
Меню содержит основные название разделов сайта, благодаря которым, посетитель может открыть ту или иную интересующую его страницу на которой он найдет ответ на свои вопросы. Но не стану напоминать о том, что первым шагом к созданию сайта является именно меню. Оно должно быть хорошо обдуманным, спланированным и самое главное – удобным для пользователя.
Стоп! Говорил, что не стану, а все равно увлекся.
Для создания выпадающего меню понадобиться HTML-код, вот с него и начнем. Пускай это будут страны мира и их города
<
ul
class
=
"dropdown"
>
<
li
class
=
"dropdown-top"
>
<
a
class
=
"dropdown-top"
href
=
"/"
>
Британия
</
a
>
<
ul
class
=
"dropdown-inside"
>
<
li
>
<
a
href
=
"/"
>
Лондон
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Бирмингем
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Лидс
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
class
=
"dropdown-top"
>
<
a
class
=
"dropdown-top"
href
=
"/"
>
США
</
a
>
<
ul
class
=
"dropdown-inside"
>
<
li
>
<
a
href
=
"/"
>
Нью-Йорк
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Лос-Анжелес
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Чикаго
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Хьюстон
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
HTML-код создали. Прежде чем перейти к основным правилам отображения (CSS) уберем маркеры. Открываем блокнот и делаем запись
ul
.dropdown
,
ul
.dropdown-inside
{
list-style-type
:
none
;
padding
:
0
;
}
Следующее правило будет скрывать наши вложенные списки (города)
ul
.dropdown-inside
{
left
:
-
9999
px
;
position
:
absolute
;
}
Скрыть города можно не только при помощи отрицательного значения left: -9999px; но и прописать правило display: none; Здесь уже, как говорится, на вкус и цвет товарища нет.
Предварительную работу произвели, теперь в зависимости от направленности (горизонтальное, вертикальное) меню будем дополнять список правил отображения. Начнем с горизонтального меню.
Горизонтально выпадающее меню
Ранее, на страницах Блога уже рассматривали
материал
, в котором раскрывался один из вариантов создания горизонтально выпадающего меню. В данном примере, для раскрытия вложенных списков использовали дополнительную
функцию jshover
и навели “пилюлю” для ИЕ.
В этом же примере, попробуем сотворить аналогичное меню при помощи только CSS. Сразу стоит оговорить, что основные стили отображения будут такими же, поэтому подробных комментариев приводить не стану. Единственное, что скажу, это то, что горизонтальное меню задается следующими правилами:
display: inline;
и
float: left;
Для очередного варианта горизонтального меню, стили будут иметь следующий вид:
/* убираем маркеры */
ul
.dropdown
li
{
position
:
relative
;
}
ul
.dropdown
,
ul
.dropdown-inside
{
list-style-type
:
none
;
padding
:
0
;
}
/* скрываем вложенные списки */
ul
.dropdown-inside
{
position
:
absolute
;
left
:
-
9999
px
;
}
/* горизонтальное меню */
ul
.dropdown
li
.dropdown-top
{
display
:
inline
;
float
:
left
;
margin
:
0
1
px
0
0
;
}
ul
.dropdown
li
.dropdown-top
a
{
padding
:
3
px
10
px
4
px
;
display
:
block
;
}
ul
.dropdown
a
.dropdown-top
{
background
:
#efefef
;
}
ul
.dropdown
a
.dropdown-top
:hover
{
padding
:
2
px
10
px
5
px
;
}
ul
.dropdown
li
.dropdown-top
:hover
.dropdown-inside
{
display
:
block
;
left
:
0
;
}
ul
.dropdown
.dropdown-inside
{
background
:
#fff
;
}
ul
.dropdown
.dropdown-inside
a
:hover
{
background
:
#efefef
;
}
В результате получилось
Попробуем усложнить задачу. К городам добавим еще их районы (второй этаж вложенного списка). В этом случаи HTML-код приобретет такие изменения:
<
ul
class
=
"dropdown2"
>
<
li
class
=
"dropdown2-top"
>
<
a
class
=
"dropdown2-top"
href
=
"/"
>
Британия
</
a
>
<
ul
class
=
"dropdown2-inside"
>
<
li
>
<
a
href
=
"/"
>
Лондон
</
a
>
<
ul
>
<
li
>
<
a
href
=
"/"
>
Район Лондона 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Район Лондона 2
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Бирмингем
</
a
>
<
ul
>
<
li
>
<
a
href
=
"/"
>
Район Бирмингема 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Район Бирмингема 2
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Лидс
</
a
>
<
ul
>
<
li
>
<
a
href
=
"/"
>
Район Лидса 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"/"
>
Район Лидса 2
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
…
Раз усложнили задачу, так попробуем привести горизонтальное меню в чувство – окрасим его и четко ограничим разделы меню – выделим активные и пассивные элементы.
ul
{
margin
:
0
;
padding
:
0
;
}
ul
.dropdown2
li
{
background
:
#ccc
;
border-right
:
1
px solid
#FFFFFF
;
float
:
left
;
/*делаем меню горизонтальным*/
height
:
30
px
;
list-style
:
none
;
/*делаем одинаковыми и по центру*/
width
:
115
px
;
text-align
:
center
;
}
ul
.dropdown2
li
a
{
text-decoration
:
none
;
display
:
block
;
padding
:
5
px
5
px
5
px
15
px
;
}
ul
.dropdown2
li
ul
{
display
:
none
;
/*скрываем вложенные пункты*/
}
ul
.dropdown2
{
/* задаём высоту и ширину меню */
background
:
#ссс
;
height
:
30
px
;
width
:
600
px
;
}
/*Выпадающее меню*/
ul
.dropdown2
li
:hover
{
background
:
#eee
;
position
:
relative
;
}
ul
.dropdown2
li
:hover
>
ul
{
border-top
:
1
px solid white
;
display
:
block
;
position
:
absolute
;
top
:
30
px
;
/*первый уровень меню раскрывается вниз*/
left
:
0
;
}
/*Второй и последующие уровни вложенности*/
ul
.dropdown2
li
ul
li
{
border-bottom
:
1
px solid white
;
height
:
auto
;
width
:
150
px
;
/*смещаем влево, если надо*/
margin-left
:
-
40
px
;
}
ul
.dropdown2
li
:hover
ul
li
ul
{
position
:
absolute
;
top
:
0
;
left
:
150
px
;
/*второй и последующие уровни раскрываются вправо*/
}
И вот что должно получится
Многие спросят, но а можно изменить цвет самых ссылок? Отвечаю, можно. Для этого дописываем правило
color: цвет;
Но те, которые знают как изменить цвет ссылок могут спросить – возможно ли на этом примере создать такое же меню, но только вертикальное?
И на этот вопрос последует положительный ответ – да, можно. Но это тема уже следующего урока.
1 Trackback or Pingback for this entry
Ноябрь 13th, 2014 в 02:26
very good! Information has helped to solve the problem