Делаем раздвижное меню без JavaScript и JQuery

Категории:HTML-верстка, Для начинающих
Теги: , ,

Опубликовано:
02-09-2010

Прогаливался сегодня утром по сети интернет и наткнулся на очень интересный пост, в котором вебмастер делал раздвижное меню с помощью JQuery. Мне оно понравилось и я начал думать, как сделать тоже самое, но без использования JQuery. Получилось немного грамостко, так как все дейсвия происходили в CSS файле. Итак, представляю Вам интересную реализацию раздвижного меню с помощью HTML и CSS2Для начала идем в HTML документ и создаем каркас:

1
2
3
4
5
6
7
8
9
10
<div id="menu">
<ul>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Главная</span></a></li>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Портфолио</span></a></li>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Интересное</span></a></li>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Блог</span></a></li>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Мои цены</span></a></li>
<li><a href=""><img src="1.jpg" width="30px" height="30px"><span>Контакты</span></a></li>
</ul>
</div>

Далее идем магичить в CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#menu li{
display:inline;
list-style-type:none;
}
#menu li a{
position:relative;
display:block;
float:left;
background:#CCCCCC;
font-family:Tahoma;
font-size:12px;
margin-left:20px;
color:#000000;
}
#menu li a span{
display:none;
}
#menu li a img{
position:relative;
padding:15px;
float:left;
border:0px;
}
#menu li a:hover{
color:#333333;
border:0px;
}
#menu li a:hover span{
position:relative;
display:inline;
background:#CCCCCC;
font-family:Tahoma;
font-size:12px;
text-decoration:underline;
top:22px;
padding-right:10px;
border:0px;
}

Что мы делали? В ссылку мы вставили картинку и тег <span> в нутри которого и находится пункт меню. Тег span мы скрыли. При наведении на картинку мы активировали тег <span> и меню  выдвигалось на нужное нам расстояние. Вот и все =) И никакого скрипта здесь не нужно. Конечно если Вы не гонитесь за плавностью, как с использованием JQuery.

Пример можно посмотреть здесь

ПОДПИШИСЬ НА RSS, для получения новостей из первых уст!

Вы хотите создать сайт на uCoz? Все для uCoz. На сайте можете найти все, что Вам нужно для создания Вашего портала.

Похожие статьи:


Комментарии:

4 комментариев к теме: “Делаем раздвижное меню без JavaScript и JQuery”

  1. evgen дата: 7 Окт 2010 в 13:26

    супер, спасибо автору

  2. Masterix дата: 7 Окт 2010 в 13:43

    Всегда пожалуйста.

  3. Ex.clusive дата: 16 Дек 2010 в 10:23

    Идея и ход мышления правильный. За счет изменения типа ссылки при наведении меняем стиль того, что в ней находится. Вот только реализовать это можно было немного посимпатичней _)

  4. Masterix дата: 16 Дек 2010 в 12:10

    Предложи как, все читатели будут тебе благодарны =)

Оставить комментарий

*