Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14

Навигация по сайту с выплывающей под навигацией при нажатии ЛКМ

08.12.2014, 17:28. Показов 1918. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите пожалуйста,уже давно ищу как сделать именно так как тут http://gubkin.ru/general/quali... uality.php



пробовал менять
CSS
1
2
3
4
5
6
7
li a:hover{
    color: #ffe;
    background-color: #5488af;
   }
 li:hover ul { 
    display: block;
   }
на
CSS
1
2
3
4
5
6
7
li a:active{
    color: #ffe;
    background-color: #5488af;
   }
 li:active ul { 
    display: block;
   }
Со свойством active работает, но нужно что бы открывалось при нажатии, и не закрывалось когда отводишь курсор.
А закрывалось что бы так же, как и в примере по ссылке т.е. при повторном нажатии.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
08.12.2014, 17:28
Ответы с готовыми решениями:

Проблема с навигацией по сайту при помощи дерева.
Здравствуйте. Я создал MasterPage. На нём создал навигационный элемент - дерево. Проблема состоит в том, что когда я нахожусь на других...

При 2-ом нажатии на ЛКМ выходит поиск
Всем привет! Появилась такая проблемка,при кликанье на ярлык или папку ЛКМ выскакивает поиск! В чём может быть проблема?

Рисование линии при нажатии лкм
Линия по статически заданным координатам отрисовывается, а при нажатии лкм QtCreator пишет: QPainter::begin: Paint device returned engine...

6
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14
09.12.2014, 13:16  [ТС]
Неужели никто не делал подобного?
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
09.12.2014, 14:07
Это называется меню аккордеон. Можно делать на чистом css, можно на js.
Вот демо и код, 3 варианта: меню аккордеон
1
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14
09.12.2014, 14:29  [ТС]
Не много не то, но все равно огромное спасибо!
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
09.12.2014, 14:45
TRamL, хех, зачем Вам этот пережиток прошлого...? Вы посмотрите какие конвульсии происходят при раскрытии и как отскакивают блоки контента при анимации... Вам ludmila-sv, дала хороший совет, почему бы им не воспользоваться? Можно конечно и спойлером сделать.. Можете посмотреть тему, которую я создавал - там есть полезные вещи...
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
09.12.2014, 14:54
Лучший ответ Сообщение было отмечено TRamL как решение

Решение

Если хочется совсем как там, то вот код оттуда

Ява-скрипт:
Кликните здесь для просмотра всего текста

JavaScript
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
function gubkin_check_menu_offset(_selector) {
    (typeof _selector == 'undefined') && (_selector = 'ul.menu a.expanded');
 
    $(_selector).each(function(){
        var cur_menu_element = $(this).next();
 
        if ( !cur_menu_element.length ) {
            return;
        }
 
        var
            first_menu = $('ul.menu'),
            min_top = first_menu.offset().top + first_menu.height(),
            footer = $('.footer'),
            max_bottom = footer.offset().top + footer.height() - 50;
 
        var cur_menu = {}
        cur_menu.top        = cur_menu_element.offset().top
        cur_menu.left       = cur_menu_element.offset().left
        cur_menu.height     = cur_menu_element.height()
        cur_menu.bottom     = cur_menu.top + cur_menu.height
 
        var delta = 0;
 
        if ( cur_menu.bottom > max_bottom ) {
            delta = max_bottom - cur_menu.bottom;
 
            if ( cur_menu.top + delta < min_top ) {
                delta = min_top - cur_menu.top;
            }
 
            cur_menu_element.offset({top: cur_menu.top + delta, left: cur_menu.left});
        }
 
        var cur_menu = {}
        cur_menu.top        = cur_menu_element.offset().top
        cur_menu.left       = cur_menu_element.offset().left
        cur_menu.height     = cur_menu_element.height()
        cur_menu.bottom     = cur_menu.top + cur_menu.height
 
        if ( cur_menu.bottom > max_bottom ) {
            delta = cur_menu.bottom - max_bottom;
 
            $('body').height($('body').height() + delta);
        }
    });
}
 
$(function() {
 
    $('ul.menu ul').each(function(i) { // Check each submenu:
 
        $(this).
            hide().
            prev().
                removeClass('expanded').
                addClass('collapsed'); // Hide it
 
        $(this).prev().
            addClass('collapsible').
            click(function(_event) { // Attach an event listener
                _event.preventDefault();
 
                var this_i = $('ul.menu ul').index($(this).next()); // The index of the submenu of the clicked link
 
                if ($(this).next().css('display') == 'none') {
 
                    // When opening one submenu, we hide all same level submenus:
                    $(this).parent('li').parent('ul').find('ul').each(function(j) {
                        if (j != this_i) {
                            $(this).slideUp(200, function () {
                                $(this).prev().removeClass('expanded').addClass('collapsed');
                            });
                        }
                    });
                    // :end
 
                    $(this).
                        // Выделяем пункт меню
                        removeClass('collapsed').addClass('expanded').
                            // Показываем подменю
                            next().
                            css('visibility', 'hidden').
                            show(function () {
                                // Проверяем, как меню вписывается в страницу
                                gubkin_check_menu_offset($(this).prev());
 
                                $(this).
                                    hide().
                                    css('visibility', 'visible').
                                    slideDown(200);
                            });
 
                } else {
 
                    $(this).next().slideUp(200, function () { // Hide submenu:
                        $(this).prev().removeClass('expanded').addClass('collapsed');
 
                        $(this).find('ul').each(function() {
                            $(this).hide().prev().removeClass('expanded').addClass('collapsed');
                        });
                    });
 
                }
 
                if ( $(this).parent().hasClass('root-item-selected') ) {
                    // Если это верхний уровень, то раскрываем подменю до текущего местоположения
                    $('li.item-selected > a.collapsible').
                        addClass('expanded').
                        removeClass('collapsed').
                        next().
                            slideDown(200, function(){
                                // Проверяем, как каждое открытое меню вписывается в страницу
                                gubkin_check_menu_offset();
                            });
                }
 
                return false; // Prohibit the browser to follow the link address
            });
    });
 
    // При клике куда угодно вне меню скрываем меню
    $(document).on('click', ':not(ul.menu *)', function(){
        $('.expanded').
            removeClass('expanded').addClass('collapsed').
            next().slideUp(200);
    });
});


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
ul.menu{ padding: 0; float: left; clear: both; margin-left:-35px; font-family: 'Tahoma', sans-serif; }
ul.menu li{ margin: 0 14px; padding: 0;  float: left;  font-size: 16px; font-weight: normal; word-spacing: 0px; }
ul.menu li span{ display: none; }
ul.menu li a{ text-decoration: none; display: block; padding: 7px 16px; }
ul.menu li a:hover{ color: #00bfef; }
 
ul.menu li ul.sub{  padding: 0;  border-bottom: none;  width: 180px; } /*filter:alpha(opacity=95); opacity:0.95;*/
ul.menu li ul.sub li{ margin: 0 2px; display: block; float: none; text-transform: none; font-size: 16px; font-weight: normal; background: none; height: auto; border-top: 1px solid #bfbfbf; position: relative;  }
ul.menu li ul.sub li.nb,
ul.menu li ul.sub li:first-child { border: none; }
ul.menu li ul.sub li a{ float: none;
display: block;
color: #000;
height: auto;
margin: 0 5px;
font-size: 14px;  }
ul.menu li ul.sub li a:hover{ background: #f9f9f9; }
 
ul.menu li ul.sub li ul{ background: #f9f9f9; left: 228px; top: 0; position: absolute; width: 180px; }
ul.menu li ul.sub li ul li{  } /*border: none;*/
ul.menu li ul.sub li ul li:first-child { border: none; }
ul.menu li ul.sub li ul li a{ padding-left: 10px; color: #5a5757;   }
ul.menu li ul.sub li ul li a:hover{ background: #dbdbdb; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494;  }
 
ul.menu li ul.sub li ul li ul{  left: 228px; position: absolute; width: 180px; }
ul.menu li ul.sub li ul li ul li a:hover{ background: #f9f9f9;  }
ul.menu li ul.sub li ul li ul li a.expanded { cursor: pointer; border-radius: 0; color: #00bfef; border: none; z-index: 13; position: relative; background: #C8C8C8; color: #757575; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494; }
 
ul.menu a.collapsed { cursor: pointer;
background: url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/nav_content_arrow.png') no-repeat;
background-position-x: left;
background-position-y: 17px;}
ul.menu a.expanded { padding: 10px 16px; cursor: pointer;  z-index: 13; position: relative;  color: #00bfef; }
ul.menu li ul.sub li a.collapsed { background: url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/menu_marker.png') 98% 15px no-repeat;  }
ul.menu li ul.sub li a.collapsed:hover{ background: #F9F9F9 url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/menu_marker.png') 98% 15px no-repeat; }
ul.menu li ul.sub li ul li a.collapsed:hover{ background: #dbdbdb url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/menu_marker.png') 98% 15px no-repeat; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494; }
ul.menu li ul.sub li a.expanded { cursor: pointer; border-radius: 0; color: #00bfef; border: none; z-index: 13; position: relative; background: #C8C8C8 url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/menu_marker.png') 98% 15px no-repeat; color: #757575; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494; }
ul.menu li ul.sub li ul li a.expanded { cursor: pointer; border-radius: 0; color: #00bfef; border: none; z-index: 13; position: relative; background: #C8C8C8 url('/bitrix/templates/gubkin_2014/components/bitrix/menu/top/images/menu_marker.png') 98% 15px no-repeat; color: #757575; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494; }
 
ul.menu > li.root-item-selected > a { padding: 10px 16px; cursor: pointer;  z-index: 13; position: relative; color: #00bfef; }
ul.menu ul.sub li.item-selected > a { cursor: pointer; border-radius: 0; color: #00bfef; border: none; z-index: 13; position: relative; background: #C8C8C8; color: #757575; -moz-box-shadow: 0 1px 3px #949494; -webkit-box-shadow: 0 1px 3px #949494; box-shadow: 0 1px 3px #949494; }
 
/* Мои правки */
ul.menu li ul.sub { display: none; }
.back{
background: none;
border: 0;
text-decoration: underline;
font-size: 11px;
padding-top: 10px;
cursor: pointer;
 
}
1
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14
09.12.2014, 15:20  [ТС]
Ещё раз большое спасибо
тот самый вариант))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
09.12.2014, 15:20
Помогаю со студенческими работами здесь

Считывание координат курсора при нажатии ЛКМ
Здравствуйте. Пишу небольшой автокликер. Столкнулся с проблемой, нужно считать координаты курсора, как и в любом кликере. Вот что...

Работа с мышью: при нажатии ЛКМ выключить индикатор ScrollLock, при ПКМ - пропустить четыре строки и вывести текст
Укажите пожалуйста на ошибки в коде программы, задание следующее:Ограничить передвижение курсора мыши левой нижней четвертью экрана. При...

Открывается реклама при нажатии ЛКМ, ПКМ в окнах браузеров
Добрый день админы. В который раз к вам обращаюсь за помощью. 1. Хотел посмотреть фильм, скачал на комп. Для просмотра использую...

При нажатии лкм/пкм в окне graphABC считывались координаты пикселя
СОЗДАЛ ТРИ ТЕМЫ НИКТО НЕ ОТВЕЧАЕТ! ЧЕ НАФИГ ЗА ФОРУМ ТАКОЙ?! мне нужно, что бы при нажатии лкм/пкм в окне graphABC считывались...

Появляются окна браузера с рекламой при любом нажатии лкм и пкм в браузере
Здравствуйте! Неожиданно начали появляться окна с рекламой при любом нажатии мышкой в браузере. Помогите!!!(скажите что нужно предпринять)


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru