Jump to content

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


Recommended Posts

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

 

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

 

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

Link to post
Share on other sites

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


    Link to post
    Share on other sites

    Так мы стили теряем  :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>
    Edited by drakulitkas
    Link to post
    Share on other sites

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

    Link to post
    Share on other sites

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

     

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

    Link to post
    Share on other sites

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

    Link to post
    Share on other sites

    Супер  :)

     

    Спасибо!!!

     

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

     

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

     

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

    Edited by drakulitkas
    Link to post
    Share on other sites

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

     

    <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}
    
    Link to post
    Share on other sites

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

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

     

    	<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;
    }
    
    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    ×
    ×
    • Create New...