Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

Всем привет!

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

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

 

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

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

Ссылка на сообщение
Поделиться на другие сайты

Всем привет!

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

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

В 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;
}

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

 

#left {...}

и замените

 

overflow: hidden;

 

на

overflow: visible;

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

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты
  • 3 месяца спустя...

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

У меня  

 

#content {...}
 

 

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

 

#left {...}
 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты
  • 2 месяца спустя...

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

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

В 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;
}

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

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

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...