osto Опубликовано 20 июля, 2013 Жалоба Поделиться Опубликовано 20 июля, 2013 Всем привет!Подскажите пожалуйста как сделать, чтобы в левом меню отображались только категории, а при наведение на них открывались подкатегорииТипа как вот здесь Цитата Ссылка на сообщение Поделиться на другие сайты
Rash Опубликовано 20 июля, 2013 Жалоба Поделиться Опубликовано 20 июля, 2013 пользуйтесь поиском для версии 2.x есть готовое решение и вопросик откуда взяли эту картинку? а то меня терзают смутные сомнения на счет откуда она у вас... Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 21 июля, 2013 Жалоба Поделиться Опубликовано 21 июля, 2013 Вот сайт, http://mybootstrap.ru/components/#dropdowns тут все подробно описано что и как тебе остается только подогнать вывод категорий в верстку и все Цитата Ссылка на сообщение Поделиться на другие сайты
osto Опубликовано 21 июля, 2013 Автор Жалоба Поделиться Опубликовано 21 июля, 2013 Вот сайт, http://mybootstrap.ru/components/#dropdowns тут все подробно описано что и как тебе остается только подогнать вывод категорий в верстку и всея не особо разбираюсь в этом(поделитись кодом, инструкцией.. пожалуйста Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 7 августа, 2013 Жалоба Поделиться Опубликовано 7 августа, 2013 Вот сайт, http://mybootstrap.ru/components/#dropdowns тут все подробно описано что и как тебе остается только подогнать вывод категорий в верстку и всеПодскажите пожалуйста, в каком файле править надо? Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 7 августа, 2013 Жалоба Поделиться Опубликовано 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 Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 У меня почему то меню обрезается справа и снизу Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 У меня почему то меню обрезается справа и снизу Видимо потому что не выполнен последний пункт Стили поправьте под свой шаблон. Скрины в студию Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 На месте этих линий обрезается менюшка Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 На месте этих линий обрезается менюшкаПоправил стили, замените код. Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Поправил стили, замените код.Стало еще хуже, обрезать стало больше Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Стало еще хуже, обрезать стало большев стилях найдите #left {...}и замените overflow: hidden; на overflow: visible; В стилях меню ширину поправьте на 260px (в разделах "Контейнер меню" и "Субменю"). Как сделаете, выложите скрины снова. Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Спасибо огромное!) Всё заработало!) Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Только теперь вопрос: как сделать чтоб нажав на категорию выводил подкатегории на главной, а он вместо этого выводит полный ассортимент товара этой категории??? Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Только теперь вопрос: как сделать чтоб нажав на категорию выводил подкатегории на главной, а он вместо этого выводит полный ассортимент товара этой категории???Подробнее можно? Не совсем понятно что именно Вы хотите. Аккордеон? Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Подробнее можно? Не совсем понятно что именно Вы хотите. Аккордеон?Допустим я нажимаю на категорию "малая быт техника", и должны на главной странице вывестись все подкатегории данной категории (т.е. категории второго уровня), потом допустим нажимаю на подкатегорию, должны вывестись её подкатегории (т.е. уже категории 3 уровня), а вместо этого всего, когда я нажимаю сейчас на категорию любую, то выводятся все товары этой кактегории в главной странице. Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Допустим я нажимаю на категорию "малая быт техника", и должны на главной странице вывестись все подкатегории данной категории (т.е. категории второго уровня), потом допустим нажимаю на подкатегорию, должны вывестись её подкатегории (т.е. уже категории 3 уровня), а вместо этого всего, когда я нажимаю сейчас на категорию любую, то выводятся все товары этой кактегории в главной странице.Дайте ссылку на сайт, я Вас вообще не понимаю Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Дайте ссылку на сайт, я Вас вообще не понимаю Мой сайт на компе Вот на примере этого сайта тогда раскажу http://www.dns-shop.ruДопустим, нажмите на категорию "Комплектующие к ПК", Вам на главной странице вадаются подкатегории ( с несколькими товарами), а у меня вместо этого выдаются все товары.... Цитата Ссылка на сообщение Поделиться на другие сайты
Brigadir Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Мой сайт на компе Вот на примере этого сайта тогда раскажу http://www.dns-shop.ruДопустим, нажмите на категорию "Комплектующие к ПК", Вам на главной странице вадаются подкатегории ( с несколькими товарами), а у меня вместо этого выдаются все товары....Это Вам, батенька, к специалистам за таким решением обращаться нужно. В этом я Вам не смогу помочь. Цитата Ссылка на сообщение Поделиться на другие сайты
AJIekS Опубликовано 8 августа, 2013 Жалоба Поделиться Опубликовано 8 августа, 2013 Это Вам, батенька, к специалистам за таким решением обращаться нужно. В этом я Вам не смогу помочь.Ладно, спасибо на том чем помогли ) Цитата Ссылка на сообщение Поделиться на другие сайты
Pacifik Опубликовано 16 ноября, 2013 Жалоба Поделиться Опубликовано 16 ноября, 2013 Не могу понять, как мне "вылечить" эту фигню.У меня #content {...} идёт раньше, чем #left {...} Как мне сделать, что бы при ресайзе браузера #left не падал вниз ? Цитата Ссылка на сообщение Поделиться на другие сайты
Pacifik Опубликовано 17 ноября, 2013 Жалоба Поделиться Опубликовано 17 ноября, 2013 Вот сайт, http://mybootstrap.ru/components/#dropdowns тут все подробно описано что и как тебе остается только подогнать вывод категорий в верстку и всеТам если подцепить скрипт и стили, то сам сайт сильно изменяется снешне из-за этих стилей... Цитата Ссылка на сообщение Поделиться на другие сайты
Rash Опубликовано 17 ноября, 2013 Жалоба Поделиться Опубликовано 17 ноября, 2013 Там если подцепить скрипт и стили, то сам сайт сильно изменяется снешне из-за этих стилей... А кто мешает выдрать только те стили которые нужны для менюшки? Цитата Ссылка на сообщение Поделиться на другие сайты
Prote1n Опубликовано 3 февраля, 2014 Жалоба Поделиться Опубликовано 3 февраля, 2014 Как сделать отступ от низа всего сайта, у меня 25 подкатегорий, при наведении на главные появляются подкатегории так вот самая нижняя упирается в низ окна браузера, как сделать отступ? Цитата Ссылка на сообщение Поделиться на другие сайты
rarara Опубликовано 21 марта, 2014 Жалоба Поделиться Опубликовано 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; } Стили поправьте под свой шаблон. В целом всё почти так как на Вашей превьюшке.Почему то при вставке данного меню цвет центральной части страницы невозможно поменять на белый. В чем подвох? Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.