Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
1 / 1 / 1
Регистрация: 23.11.2015
Сообщений: 90
1

Раскрывающееся меню

22.01.2017, 15:47. Показов 919. Ответов 3
Метки нет (Все метки)

Всем привет. Не знаю где это выложить тут или в jQuery разделе. Как сделать такое меню?
при нажатии на него должно появляться меню разделов (это я сделал). У меня не получается сделать так чтобы серое меню при активности стало красным
Миниатюры
Раскрывающееся меню  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.01.2017, 15:47
Ответы с готовыми решениями:

Раскрывающееся меню
Всем привет, уже несколько дней пытаюсь сделать раскрывающееся меню, как на http://fano.gov.ru/ru/...

Раскрывающееся меню с авторизацией
Не могу нормально дописать нормальный стиль для раскрытие авторизации. У меня надпись становиться...

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

Раскрывающееся меню при наведении
Здравствуйте, у нас такая проблема, поставили в блок header.php виджет меню, которое должно...

3
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
22.01.2017, 15:54 2
Prorok256, как вы реализовали появление меню?
0
1 / 1 / 1
Регистрация: 23.11.2015
Сообщений: 90
22.01.2017, 16:17  [ТС] 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
<a name="downlist" href="javascript:void(0);"><div class="icon_menu"></div></a>
               
               
               
               
               
               
               
               
               
               
               
               
               <div class="hid_menu" id="downlist" style="display:none"> 
               <div class="mini-menu left__menu">
        <ul>
             <li>
                <a href="/" class="header__menu__link">Главная</a>
            </li>
            <li class="sub">
                <a href="/kompanii/" class="header__menu__link" alt="38">О компании</a>
                <ul>
                   <li><a href="/kompanii/faq/">Вопросы и ответы</a></li>
                   <li><a href="/kompanii/otzyvy/">Отзывы</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="/services/" class="header__menu__link" alt="5">Каталог конвертов</a>
                <ul>
                    <li><a href="/services/c4/">Конверты С4</a></li>
                    <li><a href="/services/c5/">Конверты C5</a></li>
                    <li><a href="/services/c6/">Конверты C6</a></li>
                    <li><a href="/services/e65/">Конверты E65</a></li>
                    <li><a href="/services/s_logotipom/">Конверты с логотипами</a></li>
                    <li><a href="/services/dlya_cd_diskov/">Конверты для CD-дисков</a></li>
                    <li><a href="/services/cvetnye/">Цветные конверты</a></li>
                    <li><a href="/services/pechat/">Конверты с печатью</a></li>
                    <li><a href="/services/kraft/">Конверты из крафт-бумаги</a></li>
                    <li><a href="/services/kraft_pakety/">Крафт-пакеты</a></li>
                </ul>
            </li>
            <li>
                <a href="/price/" class="header__menu__link" alt="15">Прайс</a>
            </li>
            <li>
                <a href="/oplata_dostavka/" class="header__menu__link" alt="39">Оплата и доставка</a>
            </li>
       </ul>
    </div>
            
            <div class="mini-menu right__menu">
            <ul>
            <li>
                <a href="/zakaz_obrazcov/" class="header__menu__link" alt="7">Заказ образцов</a>
            </li>
            <li>
                <a href="/oborudovanie/" class="header__menu__link" alt="6">Оборудование</a>
            </li>
            <li class="sub">
                <a href="/interest/28/" class="header__menu__link" alt="4">Статьи</a>
                <ul>
                    <li><a href="/interest/44/">Конверты с логотипом для успеха вашей компании</a></li>
                    <li><a href="/interest/45/">Виды почтовых конвертов</a></li>
                    <li><a href="/interest/46/">История конвертов для дисков</a></li>
                    <li><a href="/interest/47/">Способы использования крафт-бумаги</a></li>
                    <li><a href="/interest/28/">Анекдоты с конвертами</a></li>
                    <li><a href="/interest/30/">Происхождение «конверта»</a></li>
                    <li><a href="/interest/27/">Очень Краткий Словарь</a></li>
                    <li><a href="/interest/29/">Конверты в цитатах</a></li>
                    <li><a href="/interest/course/">Конверты - краткий курс</a></li>
                </ul>
            </li>
            <li>
                <a href="/contact/" class="header__menu__link" alt="8">Контактная информация</a>
            </li>
        </ul>
    </div>
    <a name="uplist" href="javascript:void(0);" class="close_button_name"><div>Закрыть меню</div></a>
    </div>

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
 <script type="text/javascript">
$('a[name=downlist]').click(function(){
    $('#downlist').slideDown(500);
});
</script>
                   <script type="text/javascript">
$('a[name=uplist]').click(function(){
    $('#downlist').slideUp(500);
});
</script>
    
    
              <script type="text/javascript">
$(document).ready(function(){
  $('.sub').hover(
    function(){
        if ($('> a',this).attr('class') != 'active'){
            $('.sub ul').slideUp();
            $('a',this).next().slideToggle();
            $('.mini-menu > ul > li > a').removeClass('active');
            $('> a',this).addClass('active');
        }
    },
    function(){
            $('.sub ul').slideUp();
            $('.mini-menu > ul > li > a').removeClass('active');
    });
    $('.sub ul > li > a').click(function(){
       $('.sub ul > li > a').removeClass('active');
       $(this).addClass('active');
    });
});
 </script>
0
112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
22.01.2017, 16:37 4
Как вариант
Javascript
1
2
3
4
5
$('a[name=downlist]').click(function(){
    $('#downlist').slideDown(500);
    $('.icon_menu).addclass('red');
});
</script>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.01.2017, 16:37

Слайдер закрывает раскрывающееся меню
На этом сайте. Когда наводиш курсор на пункт меню, то раскрывающееся спиок оказывается под...

Плавно раскрывающееся меню на CSS
Хочу сделать, чтобы при наведении курсора мыши на элемент меню, оно плавно бы раскрывалось и при...

Раскрывающееся меню с одновременным открытием страницы
Здравствуйте! Задача такого плана: при нажатии на меню (Click me) появляются пункты меню ниже...

Как добавить выплывающее меню к уже готовому горизонтальному меню (не меняя дизайн горизонтального меню)?
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;...


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

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

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