Содержание

Создание меню для сайта на jQuery, с эффектом наложения

От автора: В этом учебнике мы создадим простое меню для сайта на jQueru, которое будет выделяться каждый раз, когда мы проведем над ним мышью, затемняя все вокруг, за исключением меню. Меню останется белым, а область подменю расширится. Мы создадим этот эффект с помощью jQuery.

Перед тем, как мы приступим к созданию меню для сайта на jQuery, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Итак, давайте начнем!

Разметка

Структура HTML будет состоять из основного упаковщика меню div, содержащего наложение, и неупорядоченного списка для меню. Само меню получит ссылку и элемент div, как подменю в своих элементах списка. Каждый из элементов подменю будет содержать списки для колонок подменю, где каждый получит заголовок элемента списка:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<div>
<div></div>
<ul>
<li>
<a href=»»>Collections</a>
<div>
<ul>
<li>
Summer 2011
</li>
<li><a href=»#»>Milano</a></li>
. ..
</ul>
<ul>
…
</ul>
<ul>
…
</ul>
</div>
</li>
<li>
<a href=»»>Projects</a>
<div>
…
</div>
</li>
<li>
<a href=»»>Fragrances</a>
<div>
<ul>
<li>
Fashion Fragrances
</li>
<li><a href=»#»>Deálure</a></li>
<li><a href=»#»>Violet Woman</a></li>
<li><a href=»#»>Deep Blue for Men</a></li>
<li><a href=»#»>New York, New York</a></li>
<li><a href=»#»>Illusion</a></li>
</ul>
</div>
</li>
<li><a href=»»>Events</a>
<div>
…
</div>
</li>
<li><a href=»»>Stores</a>
<div>
. ..
</div>
</li>
</ul>
</div>

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

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<div>

<div></div>

<ul>

<li>

<a href=»»>Collections</a>

<div>

<ul>

<li>

Summer 2011

</li>

<li><a href=»#»>Milano</a></li>

…

</ul>

<ul>

…

</ul>

<ul>

…

</ul>

</div>

</li>

<li>

<a href=»»>Projects</a>

<div>

. ..

</div>

</li>

<li>

<a href=»»>Fragrances</a>

<div>

<ul>

<li>

Fashion Fragrances

</li>

<li><a href=»#»>Deálure</a></li>

<li><a href=»#»>Violet Woman</a></li>

<li><a href=»#»>Deep Blue for Men</a></li>

<li><a href=»#»>New York, New York</a></li>

<li><a href=»#»>Illusion</a></li>

</ul>

</div>

</li>

<li><a href=»»>Events</a>

<div>

…

</div>

</li>

<li><a href=»»>Stores</a>

<div>

…

</div>

</li>

</ul>

</div>

У каждого из div’ов подменю будут назначены inline-стили для позиций слева. Посмотрев на стиль, мы увидим, что нужно установить это значение, если хотим, чтобы подменю было абсолютно позиционировано, но внутри относительно позиционированного контейнера. Так что для позиционирования всех div’ов подменю вначале всего меню нам нужно «оттащить» каждый div побольше влево, следовательно, так мы получим отрицательное левое значение для каждого div’а (уменьшение на 112px).

Давайте посмотрим на стиль.

CSS

Убедитесь сначала, что вы сбросили все стили (нам для списка не нужно никаких отступов или полей, определенных браузером). Мы начнем с наложения в теле (body), которое является простым div’ом с исходной непрозрачностью, установленной на 0:

.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}

.oe_overlay{

background:#000;

opacity:0;

position:fixed;

top:0px;

left:0px;

width:100%;

height:100%;

}

Position будет установлен на fixed, так как нам нужно, чтобы он всегда оставался в левом верхнем углу, заполняя весь экран.

Список основного меню получит следующий стиль:

ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}

ul.oe_menu{

list-style:none;

position:relative;

margin:30px 0px 0px 40px;

width:560px;

float:left;

clear:both;

}

Вы, возможно, хотели бы применить его способность свободно перемещаться, если планируете его интегрировать куда-нибудь на свой сайт. Что действительно важно — так это расположение пунктов списка.

ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}

ul.oe_menu > li{

width:112px;

height:101px;

padding-bottom:2px;

float:left;

position:relative;

}

Они будут позиционированы относительно, так, чтобы у нас были абсолютно расположенные элементы подменю.

Гиперссылка меню верхнего слоя получит следующий стиль, формирующий блок:

ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

ul.oe_menu > li > a{

display:block;

background-color:#101010;

color:#aaa;

text-decoration:none;

font-weight:bold;

font-size:12px;

width:90px;

height:80px;

Адаптивное меню для сайта

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<header>
    <nav>
        <ul>
            <li><a href="#0">О нас</a></li>
            <li><a href="#0">Проекты</a></li>
            <li><a href="#0">Блог</a></li>
            <li><a href="#0">Контакты</a></li>
            <li>
                <a href="#0"><span>Категории</span></a>
                <ul>
                    <li><a href="#0">Меню</a></li>
                    <li><a href="#0">Категория 1</a></li>
                    <li><a href="#0">Категория 2</a></li>
                    <li><a href="#0">Категория 3</a></li>
                    <li><a href="#0">Категория 4</a></li>
                    <li><a href="#0">Категория 5</a></li>
                    <li><a href="#0">Placeholder</a></li>
                </ul>
            </li>
        </ul> <!-- . cd-main-nav -->
    </nav> <!-- .cd-main-nav-wrapper -->
    <a href="#0">Menu<span></span></a>
</header>