Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
JEFIN
0 / 0 / 0
Регистрация: 29.06.2015
Сообщений: 2
1

Выезжающее меню CSS

29.06.2015, 10:00. Просмотров 519. Ответов 3
Метки нет (Все метки)

Добрый день. Очень нужна помощь знающих людей. Моя задача была создать выезжающее подменю из меню. Я это сделал, теперь задача сделать выезжающее ВТОРОЕ ПОДМЕНЮ из ПЕРВОГО ПОДМЕНЮ, что ну никак не получается. Подскажите в чем косяк почему не прячется и не выезжает второе подменю из первогоподменю?
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
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
173
174
175
176
177
178
179
180
181
182
183
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
 
 
 
<style>
a { 
    text-decoration: none;
   } 
 
 
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
 border-radius:5px 5px 0  0;
}
.menu {
    width: auto;
    height: auto;
   border: 1px solid #e6e6e6;
 
}
.menu > li > a {
    background-color: #e6e6e6;
    border-bottom: 1px solid #fff;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fff;
    -moz-box-shadow: inset 0px 1px 0px 0px #fff;
    box-shadow: inset 0px 1px 0px 0px #fff;
    width: 72%;
    height:  3.75em;
    line-height: 3.75em;
    text-indent: 0em;
    display: block;
    position: relative;
  
    font-weight: 600;
    color: #58585b;
  
}
 
.menu ul li a {
    background: #fff;
    border-bottom:1px solid #efeff0;
    width: 72%;
    height:2.75em;
    line-height: 3.75em;
    text-indent: 0em;
    display: block;
    position: relative;
    font-weight: 100;
    color: #0088cc;
}
 
.menu > li > a:hover,
.menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(245, 130, 32), rgb(247, 164, 90));
    background-image: -moz-linear-gradient(top, rgb(245, 130, 32), rgb(247, 164, 90));
    background-image: -o-linear-gradient(top, rgb(245, 130, 32), rgb(247, 164, 90));
    background-image: -ms-linear-gradient(top, rgb(245, 130, 32), rgb(247, 164, 90));
    background-image: linear-gradient(top, rgb(245, 130, 32), rgb(247, 164, 90));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#45c7eb', EndColorStr='#2698db');
   
    -webkit-box-shadow: inset 0px 1px 0px 0px #f58220;
    -moz-box-shadow: inset 0px 1px 0px 0px #f58220;
    box-shadow: inset 0px 1px 0px 0px #f58220;
    border-radius:5px 5px 0  0;
}
 
.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height:1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight:500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #878889;
}
.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #0088cc;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius:769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
    content: 'в–¶';
    font-size: 8px;
    color: #0088cc;
    position: absolute;
    width: 1em;
    height:1em;
    top: 0;
    left: 0.5em;
}
 .menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}
</style>
 
<body>
 
 
    <ul class="menu">
 <li class="item1"><a href="#">Первое меню<img 
 
src="rasmenu2.png" alt="Первое меню"></a>
  <ul>
          <li class="subitem1"><a href="#">1 подменю</a>
 
[COLOR="Red"]                        <ul >
                                <li>2 подменю</li>
                                <li>2 подменю</li>
                                <li>2 подменю</li>
                                <li>2 подменю</li>
                         </ul>[/COLOR]
                </li>
           <li class="subitem2"><a href="#">1 подменю</a></li>
                <li class="subitem3"><a href="#">1 подменю</a></li>
           <li class="subitem4"><a href="#">1 подменю</a></li>
            </ul>
 
            
        </li>
             
    </ul>
<script type="text/javascript">
$(function() {
 
    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
     
    menu_ul.hide();
 
    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
 
});
</script>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
29.06.2015, 10:00
Ответы с готовыми решениями:

Выезжающее с боку меню
Помогите написать выезжающее меню с боку div1 скрыт, div2 остается на...

Выезжающее по клику меню на js
Хочу в качестве обучения сделать footer-bar(нижний меню-бар) как на сайте вот...

Задержка css метода в выпадающем меню
Добрый вечер. У меня меню сделано полностью на css через display: none; и как...

по клику меню раздела, меняется свойство css
Вобщем поправьте меня либо посоветуйте дельней варик как это сделать. Ситуация...

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

3
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
29.06.2015, 20:44 2
Javascript
1
2
var menu_ul = $('.menu > li > ul'),
    menu_a  = $('.menu > li > a');
У второго подменю уже другая вложенность не так ли? По этому эти строчки уже не подходят.

Добавлено через 3 минуты
Вы не пробовали коль используете jQuery, воспользоватся виджетом аккордион ?
0
JEFIN
0 / 0 / 0
Регистрация: 29.06.2015
Сообщений: 2
30.06.2015, 12:17  [ТС] 3
Спасибо, все получилось как раз с помощью аккордиона))
0
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
30.06.2015, 13:57 4
Цитата Сообщение от JEFIN Посмотреть сообщение
Спасибо, все получилось как раз с помощью аккордиона))
Рад был помочь.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.06.2015, 13:57

Блок меню - выезжающее меню
Доброй ночи подскажите начинающему ,вот у меня есть сайт у меня идет меню...

Кнопки меню. CSS
Доброго времени суток. Как сделать так чтобы при нажатии на любую кнопку меню...

Всплывающие меню, css/js?
Вопрос: Как сделать, что бы при наведении курсором мыши на...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru