Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 04.07.2016
Сообщений: 4
1

Мне нужно доделать выпадающее меню

04.07.2016, 16:05. Показов 1115. Ответов 5
Метки css, html, javascript (Все метки)
Author24 — интернет-сервис помощи студентам

Хотелось бы сделать так,что-бы выпадающее меню CSS выпадало на слайдер.

Вот сам код HTML:
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

<header id="header">
    <div id="error" align="middle">
    <a href="#"><em class="fa fa-vk"></em></a>
    <a href="#"><em class="fa fa-facebook-square"></em></a>
    <a href="#"><em class="fa fa-instagram"></em></a>
    <a href="#"><em class="fa fa-twitter"></em></a>
    </div>
    <div id="buttons" align="middle">
    <div id="login-registration"><button class="button"><i class="fa fa-users"></i></button><a href="#" class="href">Вход/</a><a href="#" class="href">Регистрация</a></div>
    <div id="number"><button class="button"><i class="fa fa-phone-square"></i></button><a href="#" class="href"></a>
    </div>
    <div id="basket"><button class="button"><i class="fa fa-shopping-cart"></i></button><a href="#" class="href">Корзина</a>
    </div>
    </div>
    <div id="vapeshop"><a href="#"><h2 align="middle">Vape Shop</h2></a></div>
 
<!--Это выпадающее меню-->
    <div class="side">
    <ul class="menu" align="middle">
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
    </ul>
    </div>
    <div class="clear"></div>
 
<!--Тут слайдер если что-->
    <div class="slider__container">
    <div class="next_button"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    <div class="prev_button"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="carousel">
      <div class="carouselitem"><img src="img/wild.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/amaru.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/chifles.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/tictac.jpg" alt=""></div>
    </div>
    </div>
</header>
КОД Выпадающего меню CSS:

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

/*main-menu*/
.side>ul>li{
    display:inline-block;
    font-size:12px;
}
.side{
width:70%;
float:left;
margin:5px;
margin-top:2px;
margin-left:265px;
position:relative;
}
 
.menu{
margin:auto;
padding-right:40px;
 
}
/*style-htef*/
a:link{
    color:black;
}
a:visited{
    color:black;
}
a{
    text-decoration:none;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*Appearance menu*/
.menu a{
    background:#3d3d3d;
    color:#fff;
    padding:10px;
    display:block;
    border-bottom:1px solid #666;
    transition:0.5s;
}
.menu a:hover{
    background:#666;
    padding:10px 0 10px 5px;
}
/*Pop-up menus*/
.menu_list{
    position:relative;
    width:100px;
}
.menu_drop{
    position:absolute;
    width:100%;
    top:100%;
    left:-9999em;
    opacity:0;
    transition:0.5s opacity;
    border-top:3px solid transparent;
}
.menu_list:hover .menu_drop{
    opacity:1;
    left:0;
    position: absolute;
}
/*menu Icons*/
.menu_list::after{
    content: "";
    position: absolute;
    border:3px solid;
    border-color:#eee transparent transparent transparent;
    top:2.5em;
    left:4em;
    transition:0.5s;
}
.menu_list:hover::after{
    transform:scaley(-1);
}
 
КОД CSS Слайдера:
 
/*slider__container*/
.slider__container img{
    max-width:100%;
    position:relative;
}
.slider__container{
  position:relative;
}
/*slide_button*/
.next_button,.prev_button{
    cursor:pointer;
    color:black;
    font-size:46px;
    position:absolute;
    top:40%;
    z-index:10;
}
.next_button{
    right:20px;
}
.prev_button{
    left:20px;
}
Что тут не так? Как мне сделать так что бы выпадающее меню,выпадало на сам Slider?
0
Лучшие ответы (1)
Сообщение: #9342248
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 04.07.2016, 16:05
Ответы с готовыми решениями:

Нужно реализовать выпадающее меню на сайте
Есть сайт Turk-Travel.ru, там слева меню. Мне нужно чтобы были только пункты которые написаны на...

Нужно доделать меню
Я делаю меню для своей программы.Помогите,пожалуйста, с действиями,что в самом низу.Вот пример...

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код:...

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: &quot;как сделать чтобы в надписи буквы1 был шрифт 19px, а...

5
$ su
1605 / 520 / 97
Регистрация: 18.11.2010
Сообщений: 2,807
Записей в блоге: 2
04.07.2016, 17:25 2
А как оно сейчас выпадает?
0
0 / 0 / 0
Регистрация: 04.07.2016
Сообщений: 4
04.07.2016, 20:22  [ТС] 3
На данный момент выпадает меню в низ.Слайдер закрывает все пункты...
0
0 / 0 / 0
Регистрация: 04.07.2016
Сообщений: 4
04.07.2016, 20:26  [ТС] 4
Вот сами картинки моей проблемы.
Миниатюры
Мне нужно доделать выпадающее меню   Мне нужно доделать выпадающее меню  
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
04.07.2016, 21:11 5
Лучший ответ Сообщение было отмечено Kradmoor как решение

Решение

Kradmoor, решения 2, либо задать слайдеру
CSS
1

z-index
меньше
либо задать меню
CSS
1

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

<!--Это выпадающее меню-->
    <div class="side">
    <ul class="menu" align="middle">
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
    </ul>
    </div>
    <div class="clear"></div>
 
<!--Тут слайдер если что-->
    <div class="slider__container">
    <div class="next_button"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    <div class="prev_button"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="carousel">
      <div class="carouselitem"><img src="img/wild.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/amaru.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/chifles.jpg" alt=""></div>
        <div class="carouselitem"><img src="img/tictac.jpg" alt=""></div>
    </div>
    </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
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

.side>ul>li{
    display:inline-block;
    font-size:12px;
}
.side{
margin:5px;
margin-top:2px;
position:relative;
}
 
.menu{
margin:auto;
padding-right:40px;
 
}
/*style-htef*/
a:link{
    color:black;
}
a:visited{
    color:black;
}
a{
    text-decoration:none;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*Appearance menu*/
.menu a{
    background:#3d3d3d;
    color:#fff;
    padding:10px;
    display:block;
    border-bottom:1px solid #666;
    transition:0.5s;
}
.menu a:hover{
    background:#666;
    padding:10px 0 10px 5px;
}
/*Pop-up menus*/
.menu_list{
    position:relative;
    width:100px;
}
.menu_drop{
    position:absolute;
    width:100%;
    top:100%;
    left:-9999em;
    opacity:0;
    transition:0.5s opacity;
    border-top:3px solid transparent;
}
.menu_list:hover .menu_drop{
    opacity:1;
    left:0;
    position: absolute;
}
/*menu Icons*/
.menu_list::after{
    content: "";
    position: absolute;
    border:3px solid;
    border-color:#eee transparent transparent transparent;
    top:2.5em;
    left:4em;
    transition:0.5s;
}
.menu_list:hover::after{
    transform:scaley(-1);
}
  
/*slider__container*/
.slider__container img{
    max-width:100%;
    position:relative;
}
.slider__container{
  position:relative;
  z-index:-1;
}
/*slide_button*/
.next_button,.prev_button{
    cursor:pointer;
    color:black;
    font-size:46px;
    position:absolute;
    top:40%;
    z-index:10;
}
.next_button{
    right:20px;
}
.prev_button{
    left:20px;
}
1
0 / 0 / 0
Регистрация: 04.07.2016
Сообщений: 4
04.07.2016, 22:09  [ТС] 6
Слушай,спасибо тебе большое,а я с position что-то пытался сделать.Ты мне очень помог!

Добавлено через 2 минуты
Прошу модераторов закрыть эту тему.
0
04.07.2016, 22:09
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 04.07.2016, 22:09
Помогаю со студенческими работами здесь

Как прикрепить выпадающее меню к названию в основном меню
Здравствуйте. Сейчас на сайте есть вертикальное меню, и при наведении на какой-либо его пункт,...

Мне нужно чтобы матлаб выдал мне решение нелинейного дифф. уравнения 2ого порядка x(t).
Всем привет, сорри, но я нуб. Искал в гуглах ответ так и не нашел...Мне нужно чтобы матлаб выдал...

Мне нужно написать коды к этим задачам.( Все пишут в Паскале). Но если можете мне в Бейсике. Пожалуйста
Мне нужно написать коды к этим задачам.( Все пишут в Паскале). Но если можете в Бейсике....

Выпадающее меню
Есть такое меню! Но мне нужно немного не так, нужно что бы выпадающий список был по горизонтали,...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru