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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Меню аккордион с активной категорией

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: Раскрывающиеся список подкатегорий через GET
Поиск в теме | Версия для печати
belltone
Отправлено: 21 Апреля, 2016 - 17:07:58
Post Id


Новичок


Покинул форум
Сообщений всего: 13
Дата рег-ции: Окт. 2012  


Помог: 0 раз(а)
Здравствуйте.

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

Задача: Например при клике на ссылку "Категория 2" она может находится где угодно, при нажатии на эту ссылку пользователь переходит на страницу каталога где должен раскрываться список под категорий этой категории.

Я хочу передавать ссылку на категории методом GET, можете помочь мне с этим.
Ссылки на категории должны быть такого вида: ?catid=1

Привожу готовый код:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="accordion">
  3.     <section class="accordion_item">
  4.         <div class="title_block">Категория 1</div>
  5.         <div class="info">
  6.             <p class="info_item"><a href="#">Компьютеры</a></p>
  7.             <p class="info_item"><a href="#" id="active">Ноутбуки</a></p>
  8.             <p class="info_item"><a href="#">Телефоны</a></p>
  9.         </div>
  10.     </section>
  11.     <section class="accordion_item">
  12.         <div class="title_block">Категория 2</div>
  13.         <div class="info">
  14.             <p class="info_item"><a href="#">Одежда</a></p>
  15.             <p class="info_item"><a href="#">Очки</a></p>
  16.         </div>
  17.     </section>
  18.     <section class="accordion_item">
  19.         <div class="title_block">Категория 3</div>
  20.         <div class="info">
  21.             <p class="info_item"><a href="#">Пылесосы</a></p>
  22.             <p class="info_item"><a href="#">Стиральные машины</a></p>
  23.         </div>
  24.     </section>
  25. </div>
  26.  


CODE (html):
скопировать код в буфер обмена
  1.  
  2. <style type="text/css">
  3. .accordion {
  4.         width:100%;
  5.         margin: 0 auto;
  6.         margin-bottom: 57px;
  7. }
  8. .accordion .accordion_item {
  9.         margin-bottom:1px;
  10.         position:relative;
  11. }
  12. .accordion .title_block {
  13.         font-family: Arial, Helvetica, sans-serif;
  14.         text-transform: uppercase;
  15.         font-size: 16px;
  16.         color: #000000;
  17.         cursor:pointer;
  18.         padding: 1.5px 0px 1.5px 0px;
  19.         -webkit-transition:all .2s linear 0;
  20.         -webkit-transition-delay:.2s 0;
  21.         transition:all .2s linear 0
  22. }
  23. .accordion .title_block:before {
  24.         content:'';
  25.         height:11px;
  26.         width:11px;
  27.         display:block;
  28.         background:url("../images/arrow1.png") no-repeat center;
  29.         position:absolute;
  30.         right:22px;
  31.         top:8px
  32. }
  33. .accordion .active_block .title_block:before {
  34.         background:url("../images/arrow1_red.png") no-repeat center;
  35.         top:8px;
  36. }
  37. .accordion .title_block:hover {
  38. }
  39. .accordion .active_block .title_block {
  40.         color: #af2c25;
  41. }
  42. .accordion .info {
  43.         display:none;
  44.         padding: 0;
  45.         overflow: hidden;
  46.         top: 4px;
  47.         margin-bottom: 8px;
  48.         position:relative;
  49. }
  50. .accordion .info_item {
  51.         font-family: Arial, Helvetica, sans-serif;
  52.         margin-bottom: 4px;    
  53. }
  54. .accordion .info_item a {
  55.         font-size: 14px;
  56.         color: #000000;
  57.         text-decoration: none;
  58. }
  59. .accordion .info_item a:hover {
  60.         text-decoration: underline;
  61. }
  62. .accordion .info_item #active {
  63.         text-decoration: underline
  64. }
  65. </style>
  66.  


CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. <script type="text/javascript">
  3.     ! function(i) {
  4.       var o, n;
  5.       i(".title_block").on("click", function() {
  6.         o = i(this).parents(".accordion_item"), n = o.find(".info"),
  7.           o.hasClass("active_block") ? (o.removeClass("active_block"),
  8.             n.slideUp()) : (o.addClass("active_block"), n.stop(!0, !0).slideDown(),
  9.             o.siblings(".active_block").removeClass("active_block").children(
  10.               ".info").stop(!0, !0).slideUp())
  11.       })
  12.     }(jQuery);
  13. </script>
  14.  

(Отредактировано автором: 21 Апреля, 2016 - 17:12:16)

 
 Top
alnik-75
Отправлено: 22 Апреля, 2016 - 14:34:46
Post Id



Посетитель


Покинул форум
Сообщений всего: 338
Дата рег-ции: Сент. 2012  
Откуда: Гродно, Беларусь


Помог: 0 раз(а)
я бы с помощью php формировал бы код аккордиона. Если catid равно формируемому элементу списку добавлял бы ему соответствующий стиль. Ну вот в таком духе
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB