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

Меню каталога (помогите раскидать)


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

Здравствуйте, мучаюсь с шаблоном )) дошел до меню, помогите пожалуйста вставить код меню симплы в имеющийся шаблон меню:

 

<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>

 

или проще стили переделывать?

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

{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}


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

    Так мы стили теряем  :mellow:

     

    попробовал вот так: 

    <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>
    Изменено пользователем drakulitkas
    Ссылка на сообщение
    Поделиться на другие сайты

    какие стили? покажите сначала верстку которая у вас, если я правильно понял то у вас разные классы для каждого уровня вложенности

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

    какие стили? покажите сначала верстку которая у вас, если я правильно понял то у вас разные классы для каждого уровня вложенности

     

    мне нужно только 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> отображается и в категории второго уровня  :(

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

    {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}

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

    Супер  :)

     

    Спасибо!!!

     

    теперь вместо <span> </span> надо указать количество товаров в каждой категории

     

    http://forum.simplacms.ru/topic/5805-кол-во-товара-в-подкатегории/?hl=%2Bколичество+%2Bтоваров+%2Bкатегории#entry45721

     

    Здоровья вам!!!

    Изменено пользователем drakulitkas
    Ссылка на сообщение
    Поделиться на другие сайты

    Как можно отменить схлопывание меню после клика на подкатегорию?

     

    <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}
    
    Ссылка на сообщение
    Поделиться на другие сайты

    Снова забрел в дебри, не могу разобраться...

    Помогите пожалуйста

     

    	<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;
    }
    
    Ссылка на сообщение
    Поделиться на другие сайты

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

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

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

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

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

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

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

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

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