drakulitkas Опубликовано 24 января, 2015 Жалоба Поделиться Опубликовано 24 января, 2015 Здравствуйте, мучаюсь с шаблоном )) дошел до меню, помогите пожалуйста вставить код меню симплы в имеющийся шаблон меню: <div id="catalog_menu"> {* Рекурсивная функция вывода дерева категорий *} {function name=categories_tree} {if $categories} <ul> {foreach $categories as $c} {* Показываем только видимые категории *} {if $c->visible} <li> {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">{/if} <a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a> {categories_tree categories=$c->subcategories} </li> {/if} {/foreach} </ul> {/if} {/function} {categories_tree categories=$categories} </div> Заготовка <ul class="menu"> <li категория 1 уровня> <ul> <li категория 2 уровня></li> <li категория 2 уровня></li> <li категория 2 уровня></li> </ul> </li> <li категория 1 уровня> <ul> <li категория 2 уровня></li> <li категория 2 уровня></li> <li категория 2 уровня></li> </ul> </li> <li категория 1 уровня> <ul> <li категория 2 уровня></li> <li категория 2 уровня></li> <li категория 2 уровня></li> </ul> </li> </ul> или проще стили переделывать? Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 24 января, 2015 Жалоба Поделиться Опубликовано 24 января, 2015 {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $c->visible} id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape} {if $c->subcategories}{categories_tree categories=$c->subcategories}{/if} {/if} {/foreach} {/if} {/function} {categories_tree categories=$categories} Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 24 января, 2015 Автор Жалоба Поделиться Опубликовано 24 января, 2015 (изменено) Так мы стили теряем попробовал вот так: <ul class="menu"> {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $c->visible} <li > <a {if $category->id == $c->id}{/if} href="catalog/{$c->url}" data-category="{$c->id}" > {$c->name|escape} </a> <ul> <li > {categories_tree categories=$c->subcategories} </li> </ul> </li> {/if} {/foreach} {/if} {/function} {categories_tree categories=$categories} </ul> Изменено 24 января, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 24 января, 2015 Жалоба Поделиться Опубликовано 24 января, 2015 какие стили? покажите сначала верстку которая у вас, если я правильно понял то у вас разные классы для каждого уровня вложенности Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 24 января, 2015 Автор Жалоба Поделиться Опубликовано 24 января, 2015 какие стили? покажите сначала верстку которая у вас, если я правильно понял то у вас разные классы для каждого уровня вложенности мне нужно только 2 уровня CSS .menu { width: auto; height: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); } .menu > li > a { background-color: #616975; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); border-bottom: 1px solid #33373d; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5); text-decoration: none; } .menu ul li a { background: #fff; border-bottom: 1px solid #efeff0; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.923em; font-weight: 400; color: #878d95; text-decoration: none; } .menu ul li:last-child a { border-bottom: 1px solid #33373d; } .menu > li > a:hover, .menu > li > a.active { background-color: #35afe3; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom: 1px solid #103c56; -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef; } .menu > li > a.active { border-bottom: 1px solid #1a638f; } .menu > li > a:before { content: ''; background-image: url(../images/sprite.png); background-repeat: no-repeat; font-size: 36px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0; } .item1 > a:before { background-position: 0 0; } .item2 > a:before { background-position: -38px 0; } .item3 > a:before { background-position: 0 -38px; } .item4 > a:before { background-position: -38px -38px; } .item5 > a:before { background-position: -76px 0; } .menu > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; background: #48515c; line-height: 1em; height: 1em; padding: .4em .6em; margin: -.8em 0 0 0; color: #fff; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow: 0px 1px 0px rgba(0,0,0,.5); font-weight: 500; } .menu > li > a:hover span, .menu > li a.active span { background: #2173a1; } .menu > li > ul li a:before{ content: '?'; font-size: 8px; color: #bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left: -2.7em; } .menu > li > ul li:hover a, .menu > li > ul li:hover a span, .menu > li > ul li:hover a:before { color: #32373D; } .menu ul > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; / background: #fff; border: 1px solid #d0d0d3; line-height: 1em; height: 1em; padding: .4em .7em; margin: -.9em 0 0 0; color: #878d95; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; text-shadow: 0px 0px 0px rgba(255,255,255,.01)); } Шаблон {if !$smarty.request.test} <ul class="menu"> {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $c->visible} <li > <a {if $category->id == $c->id}{/if} href="catalog/{$c->url}" data-category="{$c->id}" > {$c->name|escape} <span>1 категория</span></a> <ul> <li > {categories_tree categories=$c->subcategories} </li> </ul> </li> {/if} {/foreach} {/if} {/function} {categories_tree categories=$categories} </ul> {/if} Вот только то, что в <span>1 категория</span> отображается и в категории второго уровня Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 24 января, 2015 Жалоба Поделиться Опубликовано 24 января, 2015 {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $level == 0} {if $c->visible} {* Первый уровень *} id, $c->children)}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape} 1 категория {if $c->subcategories} {categories_tree categories=$c->subcategories level=$level+1} {/if} {/if} {else} {* Второй уровень *} {if $c->visible} id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name} {/if} {/if} {/foreach} {/if} {/function} {categories_tree categories=$categories level = 0} Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 24 января, 2015 Автор Жалоба Поделиться Опубликовано 24 января, 2015 (изменено) Супер Спасибо!!! теперь вместо <span> </span> надо указать количество товаров в каждой категории http://forum.simplacms.ru/topic/5805-кол-во-товара-в-подкатегории/?hl=%2Bколичество+%2Bтоваров+%2Bкатегории#entry45721 Здоровья вам!!! Изменено 24 января, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 25 января, 2015 Автор Жалоба Поделиться Опубликовано 25 января, 2015 Как можно отменить схлопывание меню после клика на подкатегорию? <script type="text/javascript"> $(function() { var menu_ul = $('.catalog-menu > li > ul'), menu_a = $('.catalog-menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script> {if !$smarty.request.test} {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $level == 0} {if $c->visible} {* Первый уровень *} <li><a {if in_array($category->id, $c->children)}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape} </a> {if $c->subcategories} <ul> {categories_tree categories=$c->subcategories level=$level+1} </ul> {/if} </li> {/if} {else} {* Второй уровень *} {if $c->visible} <li><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}<span></span></a></li> {/if} {/if} {/foreach} {/if} {/function} <ul class="catalog-menu">{categories_tree categories=$categories level = 0}</ul> </ul> {/if} Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 27 января, 2015 Автор Жалоба Поделиться Опубликовано 27 января, 2015 Снова забрел в дебри, не могу разобраться...Помогите пожалуйста <div id="right-content"> <ul class="slideMenu"><!-- Меню каталога --> {if !$smarty.request.test} {function name=categories_tree} {if $categories} {foreach $categories as $c} {if $level == 0} {if $c->visible} {* Первый уровень *} <li><a {if in_array($category->id, $c->children)}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape} <span>1 категория</span></a> {if $c->subcategories} <ul> {categories_tree categories=$c->subcategories level=$level+1} </ul> {/if} </li> {/if} {else} {* Второй уровень *} {if $c->visible} <li><a {if $category->id == $c->id}class="selected"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name}<span>2 категория</span></a></li> {/if} {/if} {/foreach} {/if} {/function} <ul>{categories_tree categories=$categories level = 0}</ul> {/if} </ul><!-- Меню каталога (The End)--> </div> <script type="text/javascript"> $(function() { var menu_ul = $('.catalog-menu > li > ul'), menu_a = $('.catalog-menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script> .slideMenu { font-size: 14px; width: auto; height: auto; -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,.73), 0px 0px 0px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,.73), 0px 0px 0px 0px rgba(0,0,0,.13); box-shadow: 0px 0px 0px 0px rgba(0,0,0,.73), 0px 0px 0px 0px rgba(0,0,0,.13); } .slideMenu > li > a { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5f5f5f', EndColorStr='#858585'); border-bottom: 1px solid #33373d; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width: 100%; height: 34px; line-height: 34px; text-indent: 34px; display: block; position: relative; font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5); } .slideMenu ul li a { border-bottom: 1px solid #444444; width: 90%; margin: 0 auto; height: 34px; line-height: 34px; text-indent: 34px; display: block; position: relative; font-size: 0.923em; font-weight: 400; color: #878d95; } .slideMenu ul li:last-child a { border-bottom: 1px solid #33373d; } .slideMenu > li > a:hover, .slideMenu > li > a.active { background-color: #535353; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555)); background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% ); background-color:#383838; border-bottom: 1px solid #131313; -webkit-box-shadow: inset 0px 1px 0px 0px #359dfc; -moz-box-shadow: inset 0px 1px 0px 0px #359dfc; box-shadow: inset 0px 1px 0px 0px #359dfc; } .slideMenu > li > a.active { border-bottom: 1px solid #8c8c8c; } .slideMenu > li > a:before { content: ''; background-image: url(../images/sprite.png); background-repeat: no-repeat; font-size: 36px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0; } .item1 > a:before { background-position: 0 0; } .item2 > a:before { background-position: -38px 0; } .item3 > a:before { background-position: 0 -38px; } .item4 > a:before { background-position: -38px -38px; } .item5 > a:before { background-position: -76px 0; } .slideMenu > li > ul li a:before{ content: '?'; font-size: 8px; color: #bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left: -2.7em; } .slideMenu > li > ul li:hover a, /*.slideMenu > li > ul li:hover a span,*/ .slideMenu > li > ul li:hover a:before { color: #32373D; } Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.