0 / 0 / 0
Регистрация: 25.01.2016
Сообщений: 4
1

Выдвижное меню поверх других элементов

25.01.2016, 11:57. Показов 1249. Ответов 6
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте, проблема такова, z-index не работает, куда бы его не вставлял.
HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <title>EMPTY</title>
    <!-- JQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" charset="UTF-8">
        $(function () {
            $('#nav li').hover(function() {
                $(this).children('ul').stop(false, true).fadeIn(200);
                $(this).addClass('selected');
            }, function() {
                $(this).children('ul').stop(false, true).fadeOut(200);
                $(this).removeClass('selected');
            });
        });
    </script>
    <link rel="shortcut icon" href="favicon.ico" 
    type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<ul id="nav">
    <li><a href="link"><img src="link" title="logo"></a></li>
    <li><a class="menu">Menu</a>
        <ul>
            <li><a href="#" class="menu">Sub-element1</a></li>
            <li><a href="#" class="menu">Sub-element2</a></li>
            <li><a href="#" class="menu">Sub-element3</a></li>
            <li><a href="#" class="menu">Sub-element4</a></li>
        </ul>
    </li>
    <li><a class="menu">News</a>
        <ul>
            <li><a href="#" class="menu">Main</a></li>
            <li><a href="#" class="menu">Update</a></li>
            <li><a href="#" class="menu">Archive</a></li>
        </ul>
    </li>
    <li><a class="menu">Downloads</a>
        <ul>
            <li><a href="link" class="menu">BootHTML</a></li>
        </ul>
    </li>
    <li><a href="" class="menu">Info</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt voluptate est vero voluptates expedita, eos perferendis. Tempora minus, laboriosam aliquam impedit, iste possimus itaque unde corporis optio non. Ex et, ipsum aut fuga porro repellendus officiis distinctio, numquam eum. Dolorum assumenda nostrum cumque quia id numquam, veniam voluptatibus aperiam mollitia facilis nobis voluptate aliquam consectetur, incidunt quam quasi nulla atque, doloremque explicabo pariatur rem! Obcaecati nemo ipsum porro at dolor.</p>
<p>Ducimus, ipsum quaerat nostrum, nesciunt fugit vero eligendi sed perspiciatis omnis, soluta ea ad eum quisquam ipsam eveniet consectetur. Alias impedit omnis, nihil temporibus nam eos tempore est necessitatibus, fugiat id, odio dolor eligendi ipsam excepturi perspiciatis iure soluta? Blanditiis sit sequi, cumque voluptas doloribus voluptatem distinctio impedit ab aperiam cupiditate cum animi sed voluptates incidunt, earum ad perspiciatis nam expedita commodi maiores nihil eius voluptatum repudiandae quod. Obcaecati, nulla.</p>
<p>Ipsam, excepturi nam aspernatur quibusdam dolores, eum. Facilis dolores culpa, facere nulla, doloribus dolorum, nobis incidunt a deleniti ut aliquam beatae sunt doloremque magnam natus distinctio sit. Accusamus, aut aliquid excepturi sint harum consequuntur vero non dolorem, voluptatibus quae quos iste iusto numquam odio aspernatur tempore, soluta deleniti eligendi voluptates provident enim ad reiciendis sapiente! Iure id maxime illo praesentium aliquid, repellendus laudantium perspiciatis ad atque quisquam recusandae nemo aut.</p>
<p>Debitis error repellat rerum numquam aspernatur incidunt suscipit, ex deserunt beatae totam quidem doloremque dolor obcaecati aliquam qui itaque, asperiores recusandae minima. Molestiae excepturi, quo ullam animi. Doloremque voluptatum laboriosam voluptates corrupti, explicabo distinctio dolorem possimus. Iste aspernatur labore impedit dolorum consequuntur facere accusantium, ipsum tempore cumque, maxime sapiente quia amet ducimus explicabo possimus animi maiores consequatur voluptatibus excepturi assumenda dolor minima sed. Quaerat praesentium alias officiis, accusamus quis deleniti.</p>
<p>Aut, perspiciatis, atque rem omnis excepturi odio ad velit quisquam, saepe iste, quia ducimus facilis recusandae aliquam ea sapiente at facere. Minus voluptatibus magni sit a velit sapiente placeat ipsa dignissimos unde modi id esse fugit praesentium porro sint nobis, quis accusamus sequi aliquam ad est quibusdam fuga eligendi provident. Ipsa alias dolorum et illum, reprehenderit id temporibus cum numquam quibusdam nobis, eum quaerat repudiandae magni soluta tenetur. Molestias, aliquam.</p>
<div class="container-sl">
        <div id="content-slider">
            <div id="slider">
                <div id="mask">
                <ul>
                <li id="first" class="firstanimation">
                <a href="#">
                <img src="https://www.cyberforum.ru/images/img_1.jpg" alt="First"/>
                </a>
                </li>
 
                <li id="second" class="secondanimation">
                <a href="#">
                <img src="https://www.cyberforum.ru/images/img_2.jpg" alt="Second"/>
                </a>
                </li>
            
                <li id="third" class="thirdanimation">
                <a href="#">
                <img src="https://www.cyberforum.ru/images/img_3.jpg" alt="Third"/>
                </a>
                </li>
                        
                <li id="fourth" class="fourthanimation">
                <a href="#">
                <img src="https://www.cyberforum.ru/images/img_4.jpg" alt="Fourth"/>
                </a>
                </li>
                        
                <li id="fifth" class="fifthanimation">
                <a href="#">
                <img src="https://www.cyberforum.ru/images/img_5.jpg" alt="fifth"/>
                </a>
                </li>
                </ul>
                </div>
                <div class="progress-bar"></div>
            </div>
        </div>
    </div>
</body>
</html>
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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
@import url("reset.css") screen;
@import url("animation.css") screen;
 
html, body {
    background: url(../images/bg.jpg);
    font-size:16px;
    font-family: Ubuntu;
}
 
* {
    margin: 0;
    padding: 0;
}
 
#nav {
    display: table;
    margin: 0px auto 0px;
}
 
#nav li {
    display: inline-block;
    list-style: none;
    float: left;
    width: 140px;
}
 
#nav li ul {
    display: none;
}
 
 
#nav li a.menu {
    display: table;
    text-decoration: none;
    color: #fff;
    background: #444;
    width: 110px;
    padding: 14px;
    text-align: center;
}
 
#nav li a.menu:hover {
        background: #ccc;
        color: #444;
    }   
 
.content h1 {
    font-size:48px;
    color:#FFF;
    text-shadow:0px 1px 1px #f4f4f4;
    text-align:center;
    padding: 0; 
}
 
.content h1 {
    font-size:48px;
    color:#000;
    text-shadow:0px 1px 1px #f4f4f4;
    text-align:center;
    padding:60px 0 30px;    
}
 
p {
    padding: 7px;
    color:#CCC;
    font-size: 12px;
    background-color: rgba(150, 150, 150, 0.25);
    text-align: center;
    float: left;
}
/* LAYOUT */
.container-sl {
    margin:0 auto;
    overflow:hidden;
    width:960px;
}
 
/* CONTENT SLIDER */
#content-slider {
    width:100%;
    height:360px;
    margin:10px auto 0;
}
/* SLIDER */
#slider {
    background:#000;
    border:5px solid #eaeaea;
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:320px;
    width:680px;
    margin:10px auto 0;
    overflow:visible;
    position:relative;
}
#mask {
    overflow:hidden;
    height:320px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:680px;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}
 
#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;   
    -webkit-animation:cycle 25s linear infinite;        
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite;     
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;       
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;        
}
 
#slider .tooltip {
    background:rgba(0,0,0,0.7);
    width:300px;
    height:60px;
    position:relative;
    bottom:75px;
    left:-320px;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
    color:#fff;
    font-size:24px;
    font-weight:300;
    line-height:60px;
    padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
    left:0px;
}
#slider:hover li, 
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
 
/* PROGRESS BAR */
.progress-bar { 
    position:relative;
    top:-5px;
    width:680px; 
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.01.2016, 11:57
Ответы с готовыми решениями:

Выпадающий список поверх других элементов
Натачиваю навыки. Выпадающий список, при наведении на него не хочет перекрывать текст &quot;Modern UI...

ВЫДВИЖНОЕ МЕНЮ
НАРОД ПОМОГИТЕ Я ХОЧУ ПОСТАВИТЬ ВЫДВЕЖНОЕ МЕНЮ !!! Поделитесь опытом и расскажите в подробностях...

Выдвижное меню
Доброго времени, столкнулся с такой проблем кой, как сделать выдвижное меню, и в этом выдвижном...

Выдвижное меню
Здравствуйте, каким образом можно &quot;раздвинуть&quot; страничку при нажатии на некую кнопку? Пример: ...

6
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 767
Записей в блоге: 5
25.01.2016, 11:59 2
z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.
0
0 / 0 / 0
Регистрация: 25.01.2016
Сообщений: 4
25.01.2016, 12:06  [ТС] 3
Знаю, все равно не работает.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#nav li ul {
    display: none;
    position: relative;
    z-index: 1000;
}
p {
    padding: 7px;
    color:#CCC;
    font-size: 12px;
    background-color: rgba(150, 150, 150, 0.25);
    text-align: center;
    position: relative;
    float: left;
}
0
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 767
Записей в блоге: 5
25.01.2016, 12:10 4
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav li ul {
    display: none;
    position: relative;
    z-index: 2;
}
p {
    padding: 7px;
    color:#CCC;
    font-size: 12px;
    background-color: rgba(150, 150, 150, 0.25);
    text-align: center;
    position: relative;
    float: left;
    z-index:1;
}
0
0 / 0 / 0
Регистрация: 25.01.2016
Сообщений: 4
25.01.2016, 12:22  [ТС] 5
Не работает. Я уже делал, подобное.
0
143 / 133 / 69
Регистрация: 08.11.2013
Сообщений: 767
Записей в блоге: 5
25.01.2016, 12:41 6
А залейте пожалуйста все файлы, ближе к вечеру гляну.
0
0 / 0 / 0
Регистрация: 25.01.2016
Сообщений: 4
25.01.2016, 12:48  [ТС] 7
В общем, решил проблему так:
1) Основному списку li присвоил значение reletive
2) Вложенным в них элементам ul присвоил значение absolute и z-index 1.

Но все равно спасибо.
0
25.01.2016, 12:48
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.01.2016, 12:48
Помогаю со студенческими работами здесь

Выдвижное меню
Проблема в том, что меню открывается только при клике на изображение. Кто нибудь сможет сделать...

Выдвижное меню на css
при нажатии на одну из категорий выпадает список подкатегорий, и когда нажимаешь на одну из...

JasnyBootstap, выдвижное меню перекрывающее блоки с содержимым
Всем здравствуйте! Верстаю шаблон, использую Bootstrap 3 и JasnyBootstap, JB использую для того,...

Меню поверх всех элементов
Добрый день, подскажите, сделала меню на HTML, но на сайте оно падает под первый блок. Что вписать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru