С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.76/80: Рейтинг темы: голосов - 80, средняя оценка - 4.76
Pro100kvachina
4 / 4 / 0
Регистрация: 23.01.2013
Сообщений: 197
1

Раскрывающие меню при нажатии

14.07.2013, 12:04. Просмотров 16021. Ответов 8
Метки нет (Все метки)

привет всем кто читает данный топик ))скажите пожалуйста, вот есть свойства hover срабатывает при наведение, подскажите свойство при нажатие что бы срабатывала(css)

хочу сделать меню,но что бы открывалось под меню не при наведение,а при нажатие на li

P.S. - без JS,JQ а чисто на css свойство
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.07.2013, 12:04
Ответы с готовыми решениями:

Вкладка меню-аккордеона закрывается при нажатии
Задумка такая. При нажатии на кнопку меню - "выпадает" подменю, которое...

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

При нажатии на пункт меню - внизу развернуть подпункты
создал тестовую менюшку для своего сайта! на одной странице пока в тестовом...

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

Как при нажатии кнопки мыши перейти на другую страничку, которая расположена в навигационном меню
Добрый день всем! За ранее благодарен тому кто откликнется!!! Как при...

8
Ms_aimation
0 / 0 / 0
Регистрация: 17.06.2013
Сообщений: 21
14.07.2013, 13:15 2
псевдокласс active
Но есть одна загвоздка это цвет ссылки при нажатии на него тоесть когда отпускаешь курсор то всё исчезает.
0
Pro100kvachina
4 / 4 / 0
Регистрация: 23.01.2013
Сообщений: 197
14.07.2013, 15:20  [ТС] 3
а как сделать что бы не исчезло?
0
Ms_aimation
0 / 0 / 0
Регистрация: 17.06.2013
Сообщений: 21
14.07.2013, 19:36 4
HtmlBook в помощь
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
14.07.2013, 21:48 5
меню называется аккордеон при щелчке мыши раскрывается. Лучше покажите образец, чтобы можно было вам точно сказать.
0
Pro100kvachina
4 / 4 / 0
Регистрация: 23.01.2013
Сообщений: 197
15.07.2013, 10:43  [ТС] 6
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
<div class='menu'>
                                                                
                </div>
 
                <ul>
                    <li>
                        <a href="">Об Агентстве</a>
                        <ul class='pod_menu1'>                          
                            <li><a href=""><img src="img/lvl2.gif">Руководство</a>
                                    <ul class='pod_menu2'>
                                    <li><a href=""><img src="img/lvl2.gif">Деятельность Агентства</a></li>
                                    <li><a href=""><img src="img/lvl2.gif">Послания Президента РК</a></li>
                                    <li><a href=""><img src="img/lvl2.gif">Реализация Стратегии</a></li>
                                </ul>
                            </li>
                            <li><a href=""><img src="img/lvl2.gif">Председатель</a></li>
                            <li><a href=""><img src="img/lvl2.gif">Ответственный секретарь</a></li>     
                            <li><a href=""><img src="img/lvl2.gif">Заместитель Председателя</a></li>                        
                        </ul> 
                    </li>
                    <li><a href="">Деятельность Агентства</a></li>
                    <li><a href="">Послания Президента РК</a></li>
                    <li><a href="">Реализация Стратегии</a></li>
                    <li><a href="">Государственные символы</a></li>
                    <li><a href="">Имидж государственной службы</a></li>
                    <li><a href="">Правовая база</a></li>
                    <li><a href="">Пресс-служба</a></li>
                    <li><a href="">Информационная работа</a></li>
                    <li><a href="">Государственные услуги</a></li>
                    <li><a href="">Работа с населением</a></li>
                    <li><a href="">Контакты</a></li>
                </ul>
            </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
.menu{  
    width: 230px;   
    float: left;
}
 
.menu li{
    height: 50px;
    border-bottom: 1px solid #c9c9c9;   
    cursor: pointer;
}
 
.menu li:hover{
    border-left: 8px solid #00a6c4;
}
 
.pod_menu1 li:hover{
    border: none;
}
 
.menu li:active .pod_menu1 {
    border-left: 8px solid #becbce;
    margin: 0 0 0 -8px;
    background: url(img/menu.gif) no-repeat;
    background-size: 230px;
}
 
.pod_menu1 li:active .pod_menu2{
    border-left: 8px solid #92989a;
    margin: 0 0 0 -36px;
}
 
.pod_menu1 img{
    margin: 0 10px 0 0;
}
 
.menu a{
    font-size: 13px;
    height: 50px;
    text-decoration: none;
    margin: 0 0 0 20px;
    color: #393939;
    font-weight: bold;
    line-height: 50px;
}
 
.menu li:active{
    border-left: 8px solid #00a6c4;
}
 
.pod_menu2 li:active{
    position: absolute;
}
 
.pod_menu1{
    position: relative;
    z-index: 2;
    width: 200px;
    background: #ccc;
    height: 200px;
    display: none;  
}
 
.pod_menu2{
    z-index: 3;
    position: absolute;
    display: none;
    width: 200px;
    height: 150px;
    background: url(img/nav.png);
    margin: 10px 0 0 -27px;
    list-style: none;
    width: 229px;   
    border: none;
}
 
.pod_menu1 li:active .pod_menu2{
    display: block;
} 
 
.menu li:active .pod_menu1{
    display: block;
    padding: 20px;
    list-style: none;
}
Добавлено через 27 секунд
меню открывается и закрывается сразу
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
15.07.2013, 10:45 7
Цитата Сообщение от Pro100kvachina Посмотреть сообщение
меню открывается и закрывается сразу
а вам нужно по щелчку? если правильно понял у вас все работает - просто нужно чтоб срабатывало не по наведению , а по щелчку ?
0
Pro100kvachina
4 / 4 / 0
Регистрация: 23.01.2013
Сообщений: 197
15.07.2013, 11:05  [ТС] 8
да именно по щелчку

Добавлено через 1 минуту
ставил свойство active но оно при нажатие появляется и сразу исчезает
0
Ruisenor
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
15.07.2013, 11:41 9
вот почитай здесь как организовать с помощью css окрытие по щелчку .

Добавлено через 3 минуты
и вот хорошее меню здесь
1
15.07.2013, 11:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.07.2013, 11:41

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

Bootstrap и адаптивное меню. При уменьшении меню распадается на несколько строк
меню до уменьшения выглядит так после уменьшения так используется...

Не пойму как в меню при наведении отобразить под меню
Сделал простенькое меню, как мне при наведении на ли отобразить ul что по...


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

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

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