Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Выпадающее меню при нажатии на определенную ссылку
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Выпадающее меню при нажатии на определенную ссылку

Страниц (1): [1]
 

1. xaser - 02 Июня, 2012 - 02:55:27 - перейти к сообщению
два дня лазил по поиску... ничего толкового...

помогите в написании кода, чтоб получалось так:
2. DelphinPRO - 02 Июня, 2012 - 08:18:08 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
  1. <ul class=menu>
  2.   <li><a>сохранить адрес</a></li>
  3.   <li><a>дополнительно</a>
  4.     <ul>
  5.       <li><a>111</a></li>
  6.       <li><a>111</a></li>
  7.       <li><a>111</a></li>
  8.     </ul>
  9.   </li>
  10. </ul>


CODE (css):
скопировать код в буфер обмена
  1. ul.menu {}
  2. ul.menu li {
  3.   display:inline-block;
  4.   border:1px;
  5.   background:white;
  6. }
  7. ul.menu ul {
  8.   display:none;
  9. }
  10. ul.menu ul li {
  11.   display:block;
  12. }


CODE (javascript):
скопировать код в буфер обмена
  1. $('.menu >li > a').click(function(){
  2.   if ($(this).siblings('ul').size() > 0) {
  3.     $(this).siblings('ul').slideToggle();
  4.   }
  5. });
3. xaser - 02 Июня, 2012 - 22:31:48 - перейти к сообщению
спасибо.. но получается в итоге, что это не выпадающее, а "выдвигающееся" меню...

у меня должно бытьтипа такого:
Каталог > Сладости > Конфеты > Шоколадные >

т.е. получается как "путь в проводнике Виндовс"... т.е. нажав на ссылку, выпадает меню с доступными вариантами...
например:
Каталог > Сладости (-> Сладости / Кислости / Соленья / Варенья) ...

но меню должно быть выпадающим (поверх следующего содержания) а не сдвигающим...
4. DelphinPRO - 04 Июня, 2012 - 18:36:38 - перейти к сообщению
с помощь CSS можете позиционировать выпадающие блоки как вам угодно
5. join - 14 Июня, 2012 - 15:09:50 - перейти к сообщению
В новых браузерах подобное делается на чистом css, без js.
6. xaser - 14 Июня, 2012 - 16:00:37 - перейти к сообщению
например?
7. join - 14 Июня, 2012 - 16:13:49 - перейти к сообщению
div div{ display: none; }
div:focus div{ display: block }

ps: =)


(Добавление)


CODE (htmlphp):
скопировать код в буфер обмена
  1.  a + ul li{display:none;}
  2.  a:focus + ul li{display:block;}


CODE (html):
скопировать код в буфер обмена
  1. <a href="#" id="us">Aclick</a>
  2. <ul id="xxx">
  3. <li>1</li>
  4. <li>2</li>
  5. </ul>

 

Powered by ExBB FM 1.0 RC1