CSS Выпадающее меню

11.11.2017

Выпадающее меню на CSS, делалось для джумлы, но использовать можно отдельно.

CSS общий:

Внимание:Ширину/Высоту нужно указывать у A, если задать у LI, то блок меню будет кликабельным частично.

?
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
#top_menu
{
    height: 51px;
    width: 1200px;
}
 
#top_menu li
{
    float: left;
    width: 195px;
    height: 51px;
/*  white-space: nowrap;*/
    text-align: center;
    border-right: #e1b92d solid 1px;
    border-left: #e1b92d solid 1px;
    z-index: 5;
    transition: .3s;
}
 
#top_menu a
{
/*  color: #000;
    padding: 0;
    text-decoration: none;
    position: relative;
    top: 15px;
    width: auto;
    display: block;
    text-transform: uppercase;
    display: block;*/
 
    color: #000;
    padding: 16px;
    text-decoration: none;
    position: relative;
    width: auto;
    display: block;
    text-transform: uppercase;
    display: block;
    height: 100%;
    width: 100%;
}
 
#top_menu li.active > a,
#top_menu li.current > a
{
/*  text-decoration: underline;*/
    background-color: #fcda3b;
}
 
#top_menu li:hover,
#top_menu a:hover
{
/*    text-decoration: underline;*/
    background-color: #fcda3b;
}
 
#top_menu li ul
{
    display: none;
}
 
#top_menu li:hover ul
{
    display: block;
}
 
#top_menu li:hover ul
{
    display: block;
}
 
#top_menu li ul
{
    background-color: #fcda3b;
    width: 160px;
/*    margin-top: 29px;*/
    padding: 0;
    margin-left: -1px;
}
 
#top_menu li ul li
{
    background-color: #fcda3b;
    list-style: none;
    float: none;
/*    text-align: left;*/
    text-decoration: none;
    border: 1px solid #fcda3b;
    border-top: #e1b92d solid 1px;
    border-bottom: #e1b92d solid 1px;
    transition: .3s;
}
 
#top_menu li ul li:hover,
#top_menu li ul li:hover a
{
    background-color: #fbc328;
}
 
#top_menu li ul li.current a
{
    background-color: #fbc328;
}

HTML для джумлы:

?
1
2
3
4
5
6
7
<div class="wrap_top_menu">
    <div id="top_menu" class="container">
        <div class="row">
            <jdoc:include type="modules" name="top_menu" style="none" />
        </div>
    </div>
</div>

HTML "чистый":

?
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
55
56
57
58
59
60
61
<div id="top_menu" class="container">
    <div class="row">
        <ul class="nav menu">
            <li class="item-107 deeper parent"><a href="/o-kompanii">О компании</a>
                <ul class="nav-child unstyled small">
                    <li class="item-113"><a href="/o-kompanii">Наша презентация</a>
                    </li>
                    <li class="item-114"><a href="/o-kompanii/otvetstvennost">Ответственность</a>
                    </li>
                    <li class="item-115"><a href="/o-kompanii/vakansii">Вакансии</a>
                    </li>
                    <li class="item-116"><a href="/o-kompanii/stat-nashim-partnerom">Стать нашим партнером</a>
                    </li>
                </ul>
            </li>
            <li class="item-108 deeper parent"><a href="/uslugi">Услуги</a>
                <ul class="nav-child unstyled small">
                    <li class="item-117"><a href="/uslugi/ekspress">Экспресс</a>
                    </li>
                    <li class="item-118"><a href="/uslugi/ekonom">Эконом</a>
                    </li>
                    <li class="item-119"><a href="/uslugi/full-truck">Full truck</a>
                    </li>
                    <li class="item-120"><a href="/uslugi/skladskaya-obrabotka">Складская обработка</a>
                    </li>
                    <li class="item-121"><a href="/uslugi/mezhdunarodnye-perevozki">Международные перевозки</a>
                    </li>
                    <li class="item-122"><a href="/uslugi/ofisnye-i-kvartirnye-pereezdy">Офисные и квартирные переезды</a>
                    </li>
                </ul>
            </li>
            <li class="item-109 deeper parent"><a href="/informatsiya">Информация</a>
                <ul class="nav-child unstyled small">
                    <li class="item-123"><a href="/informatsiya/reglament-predostavleniya-uslug">Регламент предоставления услуг</a>
                    </li>
                    <li class="item-124"><a href="/informatsiya/tipovoj-dogovor">Типовой договор</a>
                    </li>
                    <li class="item-125"><a href="/informatsiya/bankovskie-rekvizity">Банковские реквизиты</a>
                    </li>
                    <li class="item-126"><a href="/informatsiya/upakovka">Упаковка</a>
                    </li>
                    <li class="item-127"><a href="/informatsiya/oformlenie-nakladnoj">Оформление накладной</a>
                    </li>
                </ul>
            </li>
            <li class="item-110 deeper parent"><a href="/press-tsentr">Пресс-центр</a>
                <ul class="nav-child unstyled small">
                    <li class="item-128"><a href="/press-tsentr">Что нового</a>
                    </li>
                    <li class="item-129"><a href="/press-tsentr/kontakty-dlya-pressy">Контакты для прессы</a>
                    </li>
                </ul>
            </li>
            <li class="item-111"><a href="/filialy">Филиалы</a>
            </li>
            <li class="item-112 current active"><a href="/kontakty">Контакты</a>
            </li>
        </ul>
 
    </div>
</div>

Категории: HTML, CSS, CMS Joomla 3.X, Joomla
Пометки: dropdown menu
Яндекс.Метрика