Раскрытие меню при щелчке мышью

@Logitech · Регистрация: 05.11.2016

Author24 — интернет-сервис помощи студентам

при щелчке мышью раскрывался список это как сделать? и текущая открытая вкладка подчеркивалсь

Добавлено через 17 часов 14 минут

HTML5

<div id=menu>
                        <ul>
                            <li><a href="#">1</a>
                                <ul>
                                    <li><a href="#">1.1</a></li>
                                    <li><a href="#">1.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a>
                                <ul>
                                    <li><a href="#">2.1</a></li>
                                    <li><a href="#">2.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">3</a>
                                <ul>
                                    <li><a href="#">3.1</a></li>
                                    <li><a href="#">3.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">4</a>
                                <ul>
                                    <li><a href="#">4.1</a></li>
                                    <li><a href="#">4.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">5</a>
                                <ul>
                                    <li><a href="#">5.1</a></li>
                                    <li><a href="#">5.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">6</a>
                                <ul>
                                    <li><a href="#">6.1</a></li>
                                    <li><a href="#">6.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">7</a>
                                <ul>
                                    <li><a href="#">7.1</a></li>
                                    <li><a href="#">7.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">8</a>
                                <ul>
                                    <li><a href="#">8.1</a></li>
                                    <li><a href="#">8.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">9</a>
                                <ul>
                                    <li><a href="#">9.1</a></li>
                                    <li><a href="#">9.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">10</a>
                                <ul>
                                    <li><a href="#">10.1</a></li>
                                    <li><a href="#">10.2</a></li>
                                </ul>
                            </li>
                        </ul>   
                </div>

CSS

    #menu {clear: both;/*Отменяет обтекание элемента одновременно с правого и левого края.*/ width:100%;/*ширина меню*/}
        #menu ul {display:block;width:100%;height:auto;margin:0px;padding:0px;list-style:none;position:relative; border-bottom:1px solid #fed11c; margin-bottom:10px; margin-top:10px;}
         #menu ul li{display:block; width:100%; height:auto; position:relative;}
         #menu ul li a{  
            position:relative; 
            display:block;
            width:100%;
                  height:auto;
                  box-sizing:border-box;
                  font-size:13px;
                  text-transform:uppercase;
                  font-weight:bold;
                  color:#e2760a;
                  line-height:1.2em;
                  padding:10px 15px;
                  border-top:1px solid #fed11c;
                  text-decoration:none;}
              #menu ul li a:hover, #menu ul li:hover a{ color:#0A3CC1; }
              #menu  ul li ul { 
                /*position:absolute; если надо получить в правую сторону выпадающий список либо в левую раскомментировать */
                  top:0px;
                   left:0; /*100%  получаем в левую сторону*/
                  display:none;
                  width:auto}
                 /*******показываем выпадающее меню при наведении ********/
                  #menu ul li:hover ul{display:block;}
                   #menu ul li:hover ul:first-child{border:none;}   
                   #menu ul li:hover ul:last-child{border:none;}          
                  #menu ul li ul li a { white-space:nowrap;text-transform:none;padding:5px 20px; background:#fff0a5; color:#e2760a!important;} /* !importantt позволяет повысить приоритет стиля*/
                  #menu ul li ul li a:hover{color:#0A3CC1!important;}

вообще нужно на css модератор закинул сюда

@mrtoxas · 06.11.2016, 15:57

Logitech, CSS служит для стилизации элементов, а js - для придания им интерактивности.
Давайте сразу уточним, чтобы вы опять не поменяли условия задачи после того, как вам предоставили решение.
1. Когда мы кликаем на элемент списка - открывается подменю. При этом другие подменю закрываются?
2. Когда мы второй раз кликаем по элементу, подменю закрывается?
3. Будут ли в меню еще вложенности, или только два уровня?

@Fedor92 · 06.11.2016, 16:18

Сообщение от Logitech

вообще нужно на css модератор закинул сюда

Что нужно на css?

Клик - это событие! Любое событие должно обрабатываться скриптом! А теперь вопрос: при какой кухне тут CSS? Можно сделать раскрытие меню на костылях с помощью псевдокласса :checked, но тогда весь Ваш код, который Вы приложили можно на свалку отправлять...

@Logitech · 06.11.2016, 16:21 **[ТС]**

1. Когда мы кликаем на элемент списка - открывается подменю. При этом другие подменю закрываются?
вышестоящее не закрывается вернее тот элемент который стоит выше
2. Когда мы второй раз кликаем по элементу, подменю закрывается?
не надо закрывать, предидущий уровень и текущий не закрывать, остальные уровни закрывать

3. будут

Добавлено через 2 минуты
:active не катит?

@mrtoxas · 06.11.2016, 16:24

Сообщение от Logitech

:active не катит?

Катит, если кнопку мыши не отпускать

@Logitech · 06.11.2016, 16:25 **[ТС]**

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

@BANO · 06.11.2016, 16:29

Сообщение от Logitech

я яву обычно отключаю

Сообщение от Logitech

чтобы не определяли скорость набора клавиатуры

Ох ё...
Во-первых, почитайте вот это. Во-вторых, как вы вообще пользуетесь остальным интернетом без js? Вк, яндекс... Всё сейчас использует js. И, в-третьих, есть много способов узнать скорость набора на клаве и бзе js, только чем именно это вам мешает жить? Никто, кроме сайтов-тренеров по набору, не использует эту инфу, она нафиг никому не нужна.

@Logitech · 06.11.2016, 20:23 **[ТС]**

фсбшники и анб

Добавлено через 3 часа 40 минут
давайте уже какое нибудь решение, спасибо

@BANO · 06.11.2016, 23:42

Сообщение от Logitech

фсбшники и анб

Смысл? Вы выходите в инет под ip, даже если он серый, у вашего провайдера есть инфа под каким ip кто выходил. Дальше, между инетом русским и иностранным есть такой же провайдер, который знает что ему нужно, так же фсбшники давным давно знают кто вы, что вы, и чем вы можете помешать. Смысл прятаться?
Это так же как ходить с раскрытым паспортом на лбу и везде при просьбе сказать своё отчество говорить "я не хочу палиться пред фсбшниками".
Параноей надо страдать по-другому. Там не только прокси нужны, но и vpn, а желательно всё это плюсануть, а ещё и разные распределёнки использовать, и вас всё равно можно будет вычислить. Понимаете ли, вы уже имеете паспорт, всё, вы уже на крючке, нету смысла прятаться.

Добавлено через 10 минут
Если вам нужно решение, то держите статейку. Там всё есть, что нужно. И вообще, вопрос, вы поисковиками то хоть пользуетесь? На форуме тем про аккордеон до хчёрта. И так и сяк. В инете ещё больше. То, что я скинул - вторая ссылка, которая мне вышла.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.11.2016, 15:57	2
	Logitech, CSS служит для стилизации элементов, а js - для придания им интерактивности. Давайте сразу уточним, чтобы вы опять не поменяли условия задачи после того, как вам предоставили решение. 1. Когда мы кликаем на элемент списка - открывается подменю. При этом другие подменю закрываются? 2. Когда мы второй раз кликаем по элементу, подменю закрывается? 3. Будут ли в меню еще вложенности, или только два уровня? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	06.11.2016, 16:18	3
	Сообщение от Logitech вообще нужно на css модератор закинул сюда Что нужно на css? Клик - это событие! Любое событие должно обрабатываться скриптом! А теперь вопрос: при какой кухне тут CSS? Можно сделать раскрытие меню на костылях с помощью псевдокласса :checked, но тогда весь Ваш код, который Вы приложили можно на свалку отправлять... 0

@Logitech 0 / 0 / 0 Регистрация: 05.11.2016 Сообщений: 7
	06.11.2016, 16:21 [ТС]	4
	1. Когда мы кликаем на элемент списка - открывается подменю. При этом другие подменю закрываются? вышестоящее не закрывается вернее тот элемент который стоит выше 2. Когда мы второй раз кликаем по элементу, подменю закрывается? не надо закрывать, предидущий уровень и текущий не закрывать, остальные уровни закрывать 3. будут Добавлено через 2 минуты :active не катит? 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.11.2016, 16:24	5
	Сообщение от Logitech :active не катит? Катит, если кнопку мыши не отпускать 0

@Logitech 0 / 0 / 0 Регистрация: 05.11.2016 Сообщений: 7
	06.11.2016, 16:25 [ТС]	6
	жесть блин я яву обычно отключаю думаю многие так делают чтобы не определяли скорость набора клавиатуры 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.11.2016, 16:29	7
	Сообщение от Logitech я яву обычно отключаю Сообщение от Logitech чтобы не определяли скорость набора клавиатуры Ох ё... Во-первых, почитайте вот это. Во-вторых, как вы вообще пользуетесь остальным интернетом без js? Вк, яндекс... Всё сейчас использует js. И, в-третьих, есть много способов узнать скорость набора на клаве и бзе js, только чем именно это вам мешает жить? Никто, кроме сайтов-тренеров по набору, не использует эту инфу, она нафиг никому не нужна. 0

@Logitech 0 / 0 / 0 Регистрация: 05.11.2016 Сообщений: 7
	06.11.2016, 20:23 [ТС]	8
	фсбшники и анб Добавлено через 3 часа 40 минут давайте уже какое нибудь решение, спасибо 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.11.2016, 23:42	9
	Сообщение от Logitech фсбшники и анб Смысл? Вы выходите в инет под ip, даже если он серый, у вашего провайдера есть инфа под каким ip кто выходил. Дальше, между инетом русским и иностранным есть такой же провайдер, который знает что ему нужно, так же фсбшники давным давно знают кто вы, что вы, и чем вы можете помешать. Смысл прятаться? Это так же как ходить с раскрытым паспортом на лбу и везде при просьбе сказать своё отчество говорить "я не хочу палиться пред фсбшниками". Параноей надо страдать по-другому. Там не только прокси нужны, но и vpn, а желательно всё это плюсануть, а ещё и разные распределёнки использовать, и вас всё равно можно будет вычислить. Понимаете ли, вы уже имеете паспорт, всё, вы уже на крючке, нету смысла прятаться. Добавлено через 10 минут Если вам нужно решение, то держите статейку. Там всё есть, что нужно. И вообще, вопрос, вы поисковиками то хоть пользуетесь? На форуме тем про аккордеон до хчёрта. И так и сяк. В инете ещё больше. То, что я скинул - вторая ссылка, которая мне вышла. 0