Раскрывающееся меню категорий

osto · July 20, 2013

Всем привет!

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

Типа как вот здесь

Rash · July 20, 2013

пользуйтесь поиском для версии 2.x есть готовое решение и вопросик откуда взяли эту картинку? а то меня терзают смутные сомнения на счет откуда она у вас...

ps-simpla · July 21, 2013

Вот сайт, http://mybootstrap.ru/components/#dropdowns

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

osto · July 21, 2013

Вот сайт, http://mybootstrap.ru/components/#dropdowns

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

я не особо разбираюсь в этом(

поделитись кодом, инструкцией.. пожалуйста

AJIekS · August 7, 2013

Вот сайт, http://mybootstrap.ru/components/#dropdowns

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

Подскажите пожалуйста, в каком файле править надо?

Brigadir · August 7, 2013

Всем привет!
Подскажите пожалуйста как сделать, чтобы в левом меню отображались только категории, а при наведение на них открывались подкатегории
Типа как вот здесь

В index.tpl находите блок меню каталога, заменяете его этим кодом:

			<!-- Меню каталога -->
                        
                         <div id="cssmenu">
                         
                         {* Рекурсивная функция вывода дерева категорий *}
                         {function name=categories_tree}
                         {if $categories}
                         <ul>
                         {foreach $categories as $c}
                         {* Показываем только видимые категории *}
                         {if $c->visible}
                         <li class='has-sub'>	
                         {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
                         <span><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a></span>
                         {categories_tree categories=$c->subcategories}
                         </li>	
                         {/if} 
                         {/foreach}
                         </ul>
                         {/if}
                         {/function}
                         {categories_tree categories=$categories}
                         </div>

			<!-- Меню каталога (The End)-->

Дальше идём в стили и добавляем следующее:

/* Сброс стилей */
#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
/* Контейнер меню */
#cssmenu > ul {
  display: block;
  position: relative;
  width: 200px;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
/* Элементы списка содержащие ссылки */
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* Основные стили ссылок */
#cssmenu > ul li a {

  /* Позиционирование */
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #ffffff;
  padding: 11px 20px;

  /* Типографика */
  font-family: Helvetica, Arial, sans-serif;
  color: #292929;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;

  /* Фон и эффекты */
  background: #ffffff;
}
/* Скругление углов первой ссылки меню и субменю */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Скругление углов последней ссылки меню и субменю */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* Стили ссылок при наведении */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #3b7cff;
  background: -webkit-linear-gradient(#3b7cff, #085aff);
  background: -moz-linear-gradient(#3b7cff, #085aff);
  background: linear-gradient(#3b7cff, #085aff);
  border-color: transparent;
}
/* Индикатор наличия субменю */
#cssmenu > ul .has-sub > a::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелки используя свойство border */

  border: 4px solid transparent;
  border-left: 4px solid #292929;
}
/* Такая же стрелка, только темнее для создания эффекта тени */
#cssmenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелку используя свойство border */

  border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Меняем цвет стрелки при наведении курсора */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* Субменю */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 200px;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
  /* Эффект затухания */

  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Показываем субменю при наведении курсора на родительскую ссылку */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1000;
}

Стили поправьте под свой шаблон. В целом всё почти так как на Вашей превьюшке.

AJIekS · August 8, 2013

У меня почему то меню обрезается справа и снизу

Brigadir · August 8, 2013

У меня почему то меню обрезается справа и снизу

Видимо потому что не выполнен последний пункт

Стили поправьте под свой шаблон.

Скрины в студию

AJIekS · August 8, 2013

На месте этих линий обрезается менюшка

Brigadir · August 8, 2013

На месте этих линий обрезается менюшка

Поправил стили, замените код.

AJIekS · August 8, 2013

Поправил стили, замените код.

Стало еще хуже, обрезать стало больше

Brigadir · August 8, 2013

Стало еще хуже, обрезать стало больше

в стилях найдите

#left {...}

и замените

overflow: hidden;

на

overflow: visible;

В стилях меню ширину поправьте на 260px (в разделах "Контейнер меню" и "Субменю"). Как сделаете, выложите скрины снова.

AJIekS · August 8, 2013

Спасибо огромное!) Всё заработало!)

AJIekS · August 8, 2013

Только теперь вопрос: как сделать чтоб нажав на категорию выводил подкатегории на главной, а он вместо этого выводит полный ассортимент товара этой категории???

Brigadir · August 8, 2013

Только теперь вопрос: как сделать чтоб нажав на категорию выводил подкатегории на главной, а он вместо этого выводит полный ассортимент товара этой категории???

Подробнее можно? Не совсем понятно что именно Вы хотите. Аккордеон?

AJIekS · August 8, 2013

Подробнее можно? Не совсем понятно что именно Вы хотите. Аккордеон?

Допустим я нажимаю на категорию "малая быт техника", и должны на главной странице вывестись все подкатегории данной категории (т.е. категории второго уровня), потом допустим нажимаю на подкатегорию, должны вывестись её подкатегории (т.е. уже категории 3 уровня), а вместо этого всего, когда я нажимаю сейчас на категорию любую, то выводятся все товары этой кактегории в главной странице.

Brigadir · August 8, 2013

Допустим я нажимаю на категорию "малая быт техника", и должны на главной странице вывестись все подкатегории данной категории (т.е. категории второго уровня), потом допустим нажимаю на подкатегорию, должны вывестись её подкатегории (т.е. уже категории 3 уровня), а вместо этого всего, когда я нажимаю сейчас на категорию любую, то выводятся все товары этой кактегории в главной странице.

Дайте ссылку на сайт, я Вас вообще не понимаю

AJIekS · August 8, 2013

Дайте ссылку на сайт, я Вас вообще не понимаю

Мой сайт на компе Вот на примере этого сайта тогда раскажу http://www.dns-shop.ru

Допустим, нажмите на категорию "Комплектующие к ПК", Вам на главной странице вадаются подкатегории ( с несколькими товарами), а у меня вместо этого выдаются все товары....

Brigadir · August 8, 2013

Мой сайт на компе Вот на примере этого сайта тогда раскажу http://www.dns-shop.ru
Допустим, нажмите на категорию "Комплектующие к ПК", Вам на главной странице вадаются подкатегории ( с несколькими товарами), а у меня вместо этого выдаются все товары....

Это Вам, батенька, к специалистам за таким решением обращаться нужно. В этом я Вам не смогу помочь.

AJIekS · August 8, 2013

Это Вам, батенька, к специалистам за таким решением обращаться нужно. В этом я Вам не смогу помочь.

Ладно, спасибо на том чем помогли )

Pacifik · November 16, 2013

Не могу понять, как мне "вылечить" эту фигню.

У меня

#content {...}

идёт раньше, чем

#left {...}

Как мне сделать, что бы при ресайзе браузера #left не падал вниз ?

Pacifik · November 17, 2013

Вот сайт, http://mybootstrap.ru/components/#dropdowns

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

Там если подцепить скрипт и стили, то сам сайт сильно изменяется снешне из-за этих стилей...

Rash · November 17, 2013

Там если подцепить скрипт и стили, то сам сайт сильно изменяется снешне из-за этих стилей...

А кто мешает выдрать только те стили которые нужны для менюшки?

Prote1n · February 3, 2014

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

rarara · March 21, 2014

В index.tpl находите блок меню каталога, заменяете его этим кодом:

			<!-- Меню каталога -->
                        
                         <div id="cssmenu">
                         
                         {* Рекурсивная функция вывода дерева категорий *}
                         {function name=categories_tree}
                         {if $categories}
                         <ul>
                         {foreach $categories as $c}
                         {* Показываем только видимые категории *}
                         {if $c->visible}
                         <li class='has-sub'>	
                         {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}
                         <span><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}</a></span>
                         {categories_tree categories=$c->subcategories}
                         </li>	
                         {/if} 
                         {/foreach}
                         </ul>
                         {/if}
                         {/function}
                         {categories_tree categories=$categories}
                         </div>

			<!-- Меню каталога (The End)-->

Дальше идём в стили и добавляем следующее:

/* Сброс стилей */
#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
/* Контейнер меню */
#cssmenu > ul {
  display: block;
  position: relative;
  width: 200px;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}
/* Элементы списка содержащие ссылки */
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* Основные стили ссылок */
#cssmenu > ul li a {

  /* Позиционирование */
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #ffffff;
  padding: 11px 20px;

  /* Типографика */
  font-family: Helvetica, Arial, sans-serif;
  color: #292929;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;

  /* Фон и эффекты */
  background: #ffffff;
}
/* Скругление углов первой ссылки меню и субменю */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Скругление углов последней ссылки меню и субменю */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* Стили ссылок при наведении */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #3b7cff;
  background: -webkit-linear-gradient(#3b7cff, #085aff);
  background: -moz-linear-gradient(#3b7cff, #085aff);
  background: linear-gradient(#3b7cff, #085aff);
  border-color: transparent;
}
/* Индикатор наличия субменю */
#cssmenu > ul .has-sub > a::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелки используя свойство border */

  border: 4px solid transparent;
  border-left: 4px solid #292929;
}
/* Такая же стрелка, только темнее для создания эффекта тени */
#cssmenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Создаём стрелку используя свойство border */

  border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Меняем цвет стрелки при наведении курсора */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* Субменю */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 200px;
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
  box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
  /* Эффект затухания */

  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Показываем субменю при наведении курсора на родительскую ссылку */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1000;
}

Стили поправьте под свой шаблон. В целом всё почти так как на Вашей превьюшке.

Почему то при вставке данного меню цвет центральной части страницы невозможно поменять на белый. В чем подвох?

Раскрывающееся меню категорий

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation