Перейти к содержимому


Выпадающее Меню По Клику

выпадающее меню по клику

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 45

#1 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 29 Сентябрь 2014 - 11:50

Доброго всем дня... Собственно вопрос:
Есть вот такая структура выпадающего меню

<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topfirst"><a href="#" style="width:42px;"><span>Item 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0 0</span></a>
<ul>
<li><a href="#">Item 0 0 0 0 0</a></li>
<li><a href="#">Item 0 0 0 0 1</a></li>
<li><a href="#">Item 0 0 0 0 2</a></li>
<li><a href="#"><span>Item 0 0 0 0 3</span></a>
<ul>
<li><a href="#">Item 0 0 0 0 3 0</a></li>
<li><a href="#">Item 0 0 0 0 3 1</a></li>
<li><a href="#">Item 0 0 0 0 3 2</a></li>
<li><a href="#">Item 0 0 0 0 3 3</a></li>
<li><a href="#">Item 0 0 0 0 3 4</a></li>
<li><a href="#">Item 0 0 0 0 3 5</a></li>
</ul></li>
</ul></li>
<li><a href="#">Item 0 0 0 1</a></li>
<li><a href="#">Item 0 0 0 2</a></li>
<li><a href="#">Item 0 0 0 3</a></li>
<li><a href="#">Item 0 0 0 4</a></li>
<li><a href="#">Item 0 0 0 5</a></li>
</ul></li>
<li><a href="#">Item 0 0 1</a></li>
<li><a href="#">Item 0 0 2</a></li>
<li><a href="#">Item 0 0 3</a></li>
<li><a href="#">Item 0 0 4</a></li>
<li><a href="#">Item 0 0 5</a></li>
</ul></li>
<li><a href="#">Item 0 1</a></li>
<li><a href="#">Item 0 2</a></li>
<li><a href="#">Item 0 3</a></li>
<li><a href="#">Item 0 4</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="width:42px;">Item 1</a></li>
<li class="topmenu"><a href="#" style="width:42px;">Item 2</a></li>
<li class="topmenu"><a href="#" style="width:42px;">Item 3</a></li>
<li class="topmenu"><a href="#" style="width:42px;">Item 4</a></li>
<li class="toplast"><a href="#" style="width:42px;">Item 5</a></li>
</ul>



CSS



ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:block;float:left;padding:0;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#0c97e2;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:12px;}
ul#css3menu1 > label.switch{
display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu1 > label.switch:before{
content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
ul#css3menu1 > label.switch:hover:before{
background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
ul#css3menu1 > .switchbox{
display:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#0978b3;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
@media screen and (max-width: 768px) {
ul#css3menu1 > li {
position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
left: 0; right:auto; top: 100%;}
ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 396px) {
ul#css3menu1 {
width: 100%;}
ul#css3menu1 > li {
display: none !important; position: relative; width: 100% !important;}
ul#css3menu1 > label.switch,ul#css3menu1 .switchbox:checked ~ li {
display: block !important;}
}

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

#2 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 30 Сентябрь 2014 - 08:44

Актуально

#3 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 30 Сентябрь 2014 - 16:39

реализация по клику требует использования java script

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

#4 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 30 Сентябрь 2014 - 16:58

Просмотр сообщенияTaisia (30 Сентябрь 2014 - 16:39) писал:

реализация по клику требует использования java script

в этом случае вам лучше воспользоваться уже готовыми решениями
например меню-аккордеон тут
В том то и дело что не проще((( хотелось бы оставить старое меню

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 01 Октябрь 2014 - 01:53

можно, в принципе, обойтись дополнительной функцией, то есть при клике на элемент задать ему класс и уже по нему стилизовать, данное меню у вас уже где-то установлено или имеется ссылка на сайт, откуда вы его взяли?

#6 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 01 Октябрь 2014 - 20:11

Просмотр сообщенияVaccina (01 Октябрь 2014 - 01:53) писал:

можно, в принципе, обойтись дополнительной функцией, то есть при клике на элемент задать ему класс и уже по нему стилизовать, данное меню у вас уже где-то установлено или имеется ссылка на сайт, откуда вы его взяли?
... Да, установлена..  ссылку прилагаю zigzag93.ru/page/catalog

Просмотр сообщенияVaccina (01 Октябрь 2014 - 01:53) писал:

можно, в принципе, обойтись дополнительной функцией, то есть при клике на элемент задать ему класс и уже по нему стилизовать, данное меню у вас уже где-то установлено или имеется ссылка на сайт, откуда вы его взяли?
... Да, установлена..  ссылку прилагаю zigzag93.ru/page/catalog

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 01 Октябрь 2014 - 23:43

спасибо за ссылку

в main.js вставляем:
$(function() {
  $('#css3menu44 li a').click(function() {
  $(this).siblings().addClass('active');
}, function() {
   $(this).siblings().removeClass('active');
});
});

далее в main.css найдите:
ul#css3menu44 li:hover > * {
	display: block;
}
замените на:
ul#css3menu44 ul.active {
	display: block;
}


#8 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 02 Октябрь 2014 - 11:08

Просмотр сообщенияVaccina (01 Октябрь 2014 - 23:43) писал:

спасибо за ссылку

в main.js вставляем:
$(function() {
$('#css3menu44 li a').click(function() {
$(this).siblings().addClass('active');
}, function() {
$(this).siblings().removeClass('active');
});
});

далее в main.css найдите:
ul#css3menu44 li:hover > * {
display: block;
}
замените на:
ul#css3menu44 ul.active {
display: block;
}
Меню не открывается теперь при наведении и по клику тоже

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 02 Октябрь 2014 - 23:35

$(function() {
  $('#css3menu44 li a').click(function() {
  $(this).siblings().addClass('active');
}, function() {
   $(this).siblings().removeClass('active');
});
});
замените на:
$(function() {
  $('#css3menu44 li a').click(function() {
  $(this).siblings().addClass('active');
});
});


#10 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 09:29

Просмотр сообщенияVaccina (02 Октябрь 2014 - 23:35) писал:

$(function() {
$('#css3menu44 li a').click(function() {
$(this).siblings().addClass('active');
}, function() {
$(this).siblings().removeClass('active');
});
});
замените на:
$(function() {
$('#css3menu44 li a').click(function() {
$(this).siblings().addClass('active');
});
});
Теперь возникла другая проблема... Открытые по клику вкладки не закрываются))))

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 03 Октябрь 2014 - 18:42

$(function() {
  $('#css3menu44 li a').click(function() {
  $(this).siblings().addClass('active');
});
});
замените на:
$(function() {
  $('#css3menu44 li a').click(function() {
	$(this).parent().children('ul').toggleClass('active');
   return (false);
  });
});


#12 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 21:16

Просмотр сообщенияVaccina (03 Октябрь 2014 - 18:42) писал:

$(function() {
$('#css3menu44 li a').click(function() {
$(this).siblings().addClass('active');
});
});
замените на:
$(function() {
$('#css3menu44 li a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});
Да, огромное вам гранмерси... все работает, вот только как сделать чтобы меню сворачивалось не на клике на ту же область а на клике в любую область, то есть при клике не в фокус?

#13 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 21:26

Просмотр сообщенияVaccina (03 Октябрь 2014 - 18:42) писал:

$(function() {
$('#css3menu44 li a').click(function() {
$(this).siblings().addClass('active');
});
});
замените на:
$(function() {
$('#css3menu44 li a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});
И еще одна проблема..... теперь не работают ссылки в данном меню...

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 03 Октябрь 2014 - 21:29

причина в пустых ссылках, пример:
<a href="#">CBZA (бензин) / 1.2 TFSI / 2WD</a>
вместо # должна быть реальная ссылка на категорию

#15 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 21:37

Просмотр сообщенияVaccina (03 Октябрь 2014 - 21:29) писал:

причина в пустых ссылках, пример:
<a href="#">CBZA (бензин) / 1.2 TFSI / 2WD</a>
вместо # должна быть реальная ссылка на категорию
нет, в меню есть реальные ссылки, например в правом столбике путь Hyundai-Solaris-верхняя строчка-запчасти для ТО - масляный фильтр

#16 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 21:44

Просмотр сообщенияVaccina (03 Октябрь 2014 - 21:29) писал:

причина в пустых ссылках, пример:
<a href="#">CBZA (бензин) / 1.2 TFSI / 2WD</a>
вместо # должна быть реальная ссылка на категорию

Прикрепленные изображения

  • 123.jpg


#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 03 Октябрь 2014 - 21:45

В структуре меню задайте дополнительные классы <li> если в нем есть  нижнего уровня меню, например, было:
<li><a href="#"><span>Item 0 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0 0</span></a></li>
</ul>
</li>
<li><a href="#">Item 0 0 0 0 0</a></li>
стало:
<li class="parent"><a href="#"><span>Item 0 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0 0</span></a></li>
</ul>
</li>
<li><a href="#">Item 0 0 0 0 0</a></li>


#18 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 21:50

Просмотр сообщенияVaccina (03 Октябрь 2014 - 21:45) писал:

В структуре меню задайте дополнительные классы <li> если в нем есть  нижнего уровня меню, например, было:
<li><a href="#"><span>Item 0 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0 0</span></a></li>
</ul>
</li>
<li><a href="#">Item 0 0 0 0 0</a></li>
стало:
<li class="parent"><a href="#"><span>Item 0 0 0</span></a>
<ul>
<li><a href="#"><span>Item 0 0 0 0</span></a></li>
</ul>
</li>
<li><a href="#">Item 0 0 0 0 0</a></li>
то есть li с классом родителя и последующий уровень будет кликабелен?  или только нижний уровень после родителя?

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 805 сообщений

Отправлено 03 Октябрь 2014 - 21:57

с данным добавлением класса я хочу реализовать возможность выпадения последующего уровня, но если у него такового иметься не будет, то он будет вести себя как обычная ссылка, то есть нам в последующем придется с добавлением класса изменить код в main.js с
$(function() {
$('#css3menu44 li a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});
на:
$(function() {
$('#css3menu44 li.parent a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});

здесь добавила класс parent

#20 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 03 Октябрь 2014 - 22:02

Просмотр сообщенияVaccina (03 Октябрь 2014 - 21:57) писал:

с данным добавлением класса я хочу реализовать возможность выпадения последующего уровня, но если у него такового иметься не будет, то он будет вести себя как обычная ссылка, то есть нам в последующем придется с добавлением класса изменить код в main.js с
$(function() {
$('#css3menu44 li a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});
на:
$(function() {
$('#css3menu44 li.parent a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});

здесь добавила класс parent
добавление класса погоды не меняет, ссылка по прежнему не активна(

Просмотр сообщенияVaccina (03 Октябрь 2014 - 21:57) писал:

с данным добавлением класса я хочу реализовать возможность выпадения последующего уровня, но если у него такового иметься не будет, то он будет вести себя как обычная ссылка, то есть нам в последующем придется с добавлением класса изменить код в main.js с
$(function() {
$('#css3menu44 li a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});
на:
$(function() {
$('#css3menu44 li.parent a').click(function() {
$(this).parent().children('ul').toggleClass('active');
return (false);
});
});

здесь добавила класс parent
а возможно ли сделать так, чтобы вне зависимости от статуса строки, она несла функцию и ссылки и родителя?





Темы с аналогичным тегами выпадающее, меню, по клику

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных