Jump to content
Официальный форум поддержки Simpla

Мега меню

ivan888
 Share Followers 0

Recommended Posts

  • 2 weeks later...
SergeyKH

SergeyKH

Posted
Posted
Окей. К примеру за сколько сможешь сделать меню как у http://www.5ok.com.ua ?

Ну я не дизайнер и не пхп промер, поэтому не думаю, что смогу удовлетворить полностью все твои требования, но чисто скрипт+стили=$50.
Там не так уж и сложно сделать это меню.
Просто добавить третью вложенность,
.ulsub width=100%,
.lisub width=33% (если три колонки или 25% если четыре и т.д.)
Ну как-то так.
Link to post
Share on other sites
  • 1 year later...
  • 2 months later...
lexter

lexter

Posted
Posted

Это в индекс

<div id="catalog_menu">
{include file='categories.tpl' categories=$categories level=0}
</div>

Это в categories.tpl

?{if $categories}
{if $level == 0}<ul class="ulcat">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}</li>
{else}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
</li>

{/if}
{/foreach}

</ul>{/if}
{if $level == 1}<ul class="ulsub">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="lisub">
<a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}
</li>
{else}
<li class="lisub">
<a href="catalog/{$c->url}" class="asub">{$c->name}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}

{/if}

Это в стили

#catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }
У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи.
Спасибо большое пригодилось на двух сайтах!!!  в одном подправил на вывод в 3 столбика ))) а собственно и править почти не чего было ))) и так выводило флоатом на новую строку )))


			
		


		
			

				
					
				
				
			

		

		
	


	

	

		
Link to post

		
			
		
		
			
		
		

		
			
Share on other sites

			

	

		
	




	



					
						
    
							
							
								
  • 
									3 months later...
								
    • 
							
						

					
					
					
				

					

					
					







	

	

	

		

			


	
		chubr
	

			
		

		

			

				

chubr
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
Это в индекс
<div id="catalog_menu">
{include file='categories.tpl' categories=$categories level=0}
</div>
Это в categories.tpl
?{if $categories}
{if $level == 0}<ul class="ulcat">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}</li>
{else}
<li class="licat">
<a href="catalog/{$c->url}" class="acat">{$c->name}</a>
</li>

{/if}
{/foreach}

</ul>{/if}
{if $level == 1}<ul class="ulsub">
{foreach item=c from=$categories}
{if $c->subcategories}
<li class="lisub">
<a href="catalog/{$c->url}" class="text-bold" class="asub">{$c->name}</a>
{include file='categories.tpl' categories=$c->subcategories level=1}
</li>
{else}
<li class="lisub">
<a href="catalog/{$c->url}" class="asub">{$c->name}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}

{/if}
Это в стили
#catalog_menu{ margin:8px 0 0 5px; padding: 0; float: left; width: 100%; font-size:13px; } .ulcat { list-style: none; margin:0; padding:0; float: left; } .licat { background:url('../images/h-menu-pad-right.jpg') no-repeat top right, url('../images/h-menu-pad-left.jpg') no-repeat top left, url('../images/h-menu-pad-center.jpg') repeat-x top; float: left; position: relative; text-align:center; vertical-align:center; height:42px; width:120px; } .licat { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -khtml-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; } .acat { color:#ffffff; font-weight:bold; text-decoration: none; display: block; width: 110px; padding: 0px 5px; margin-top:5px; } .ulsub { float: left; background:#ffffff; border:2px solid #4AA93F; display: none; position: absolute; padding: 5px; width: 310px; z-index:99; margin-top:-12px; list-style: none; text-align:left; } .lisub { float: left; margin:0; padding:0; border:none; width:100%; background: none; border:none; } .asub { width: 300px; font-size:14px; text-align:left; color:#333333; border:none; text-decoration:none; padding:4px 10px; display: block; } .licat:hover, .licat.jshover { background:url('../images/h-menu-pad-sel-right.jpg') no-repeat top right, url('../images/h-menu-pad-sel-left.jpg') no-repeat top left, url('../images/h-menu-pad-sel-center.jpg') repeat-x top; } .licat:hover .acat, .licat.jshover .acat { color:#ffffff; } .licat:hover.asub, .licat.jshover.asub { } .licat:hover.asub:hover { color:#e84d07; } .lisub:hover, .lisub.jshover { background:#DDE7F3; border:none; } .licat:hover .ulsub, .licat.jshover .ulsub { display: block; }
У меня работает, но тебе надо подобрать картинки фоновые, ну если хтмл как-то понимаешь то разберешься. Кстати, то же меню можно сделать и с обычной функцией. Максимальная вложенность меню = 2. Т.е. категории и подкатегории, а под-подкатегорий нет. Но сделать можно по примеру. Удачи.
 
Подскажите, пожалуйста, куда здесь добавить {if $c->visible} чтобы выводились только активные категории?
--------------
Решение нашел


			
		


		
			

				
					
				
				
			

		

		
	


	

	

		
Link to post

		
			
		
		
			
		
		

		
			
Share on other sites

			

	

		
	




	



					
					
					
				

					

					
					







	

	

	

		

			


	
		chubr
	

			
		

		

			

				

chubr
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
созрели вопросы:
 
1. Как сделать, чтобы подкатегория не показывалась, если там нет товара в наличии (если она пуста)?
2. Как можно сделать цифру рядом с названием подкатегории с кол-во в ней товаров в наличии?


			
		


		
			

				
					
				
				
			

		

		
	


	

	

		
Link to post

		
			
		
		
			
		
		

		
			
Share on other sites

			

	

		
	




	



					
						
    
							
							
								
  • 
									2 months later...
								
    • 
							
						

					
					
					
				

					

					
					






					
						
    
							
							
								
  • 
									2 months later...
								
    • 
							
						

					
					
					
				

					

					
					






					
						
    
							
							
								
  • 
									4 weeks later...
								
    • 
							
						

					
					
					
				

					

					
					







	

	

	

		

			


	
		Vince
	

			
		

		

			

				

Vince
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/  вот под этот css в самом HTML?
 
/* Основное меню */
.mega-menu{
     font: bold 13px Arial, sans-serif; 
     line-height: 16px; 
     background: #333;
     border-left: 1px solid #1B1B1B; 
     position: relative; /* Обязательно */
}
.mega-menu li a {
     display: block; 
     color: #fff; 
     padding: 12px 38px 12px 25px; 
     text-shadow: 1px 1px 1px #000; 
     text-decoration: none;  
     border-top: 1px solid #555; 
     border-bottom: 1px solid #222; 
     border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
     background: #4b4b4b; 
     color: #fff; 
     border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
     position: relative;
}


/* Стрелки основного меню */
.mega-menu li a .dc-mega-icon {
     display: block; 
     position: absolute; 
     top: 18px; 
     right: 15px; 
     width: 6px; 
     height: 8px; 
     background: url(../images/arrow_right.png) no-repeat 0 0;
}


/* Стили подменю */
.mega-menu li .sub-container {
     position: absolute; /* Обязательно */
     background: #4B4B4B;
     padding: 10px 10px 0 10px; 
     border: 1px solid #4b4b4b; 
     border-left: none;
}
.mega-menu li .sub-container .sub {}

.mega-menu li .sub .row {
     width: 100%; 
     overflow: hidden;
}
.mega-menu li .sub li {
     float: none; 
     width: 150px; 
     font-size: 1em; 
     font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
     float: left; /* Обязательно */
     margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
     background: none; 
     border: none; 
     text-shadow: none;
     float: none;
     color: #fff; 
     padding: 7px 10px; 
     display: block;
     text-decoration: none; 
     font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
     padding: 5px 5px 5px 15px; 
     margin-bottom: 5px; 
     background: #E88221; 
     text-transform: uppercase; 
     font-weight: bold; 
     color: #fff; 
     text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
     color: #000; 
     text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
     padding: 4px 5px 4px 20px; 
     background: url(../images/arrow_white.png) no-repeat 5px 8px; 
     font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
     padding-right: 0;
}


/* Стили подменю второго уровня */
.mega-menu li .sub-container.non-mega .sub {
     padding: 10px;}
     .mega-menu li .sub-container.non-mega li {
     padding: 0; 
     margin: 0;
     width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
     padding: 7px 5px 7px 22px; 
     background: url(../images/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px;
}



			
		


		
			

				
					
				
				
			

		

		
	


	

	

		
Link to post

		
			
		
		
			
		
		

		
			
Share on other sites

			

	

		
	




	



					
					
					
				

					

					
					







	

	

	

		

			


	
		Vince
	

			
		

		

			

				

Vince
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
 
А как сделать второй уровень такого типа меню http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/  вот под этот css в самом HTML?
 
/* Основное меню */
.mega-menu{
     font: bold 13px Arial, sans-serif; 
     line-height: 16px; 
     background: #333;
     border-left: 1px solid #1B1B1B; 
     position: relative; /* Обязательно */
}
.mega-menu li a {
     display: block; 
     color: #fff; 
     padding: 12px 38px 12px 25px; 
     text-shadow: 1px 1px 1px #000; 
     text-decoration: none;  
     border-top: 1px solid #555; 
     border-bottom: 1px solid #222; 
     border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
     background: #4b4b4b; 
     color: #fff; 
     border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
     position: relative;
}


/* Стрелки основного меню */
.mega-menu li a .dc-mega-icon {
     display: block; 
     position: absolute; 
     top: 18px; 
     right: 15px; 
     width: 6px; 
     height: 8px; 
     background: url(../images/arrow_right.png) no-repeat 0 0;
}


/* Стили подменю */
.mega-menu li .sub-container {
     position: absolute; /* Обязательно */
     background: #4B4B4B;
     padding: 10px 10px 0 10px; 
     border: 1px solid #4b4b4b; 
     border-left: none;
}
.mega-menu li .sub-container .sub {}

.mega-menu li .sub .row {
     width: 100%; 
     overflow: hidden;
}
.mega-menu li .sub li {
     float: none; 
     width: 150px; 
     font-size: 1em; 
     font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
     float: left; /* Обязательно */
     margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
     background: none; 
     border: none; 
     text-shadow: none;
     float: none;
     color: #fff; 
     padding: 7px 10px; 
     display: block;
     text-decoration: none; 
     font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
     padding: 5px 5px 5px 15px; 
     margin-bottom: 5px; 
     background: #E88221; 
     text-transform: uppercase; 
     font-weight: bold; 
     color: #fff; 
     text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
     color: #000; 
     text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
     padding: 4px 5px 4px 20px; 
     background: url(../images/arrow_white.png) no-repeat 5px 8px; 
     font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
     padding-right: 0;
}


/* Стили подменю второго уровня */
.mega-menu li .sub-container.non-mega .sub {
     padding: 10px;}
     .mega-menu li .sub-container.non-mega li {
     padding: 0; 
     margin: 0;
     width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
     padding: 7px 5px 7px 22px; 
     background: url(../images/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
     color: #a32403; 
     background: #efefef url(../images/arrow_on.png) no-repeat 7px 10px;
}

 
Вроде бы так добавил класс             <a{categories_tree categories=$categories}class="sub-container"></a>


			
		


		
			

				
					
				
				
			

		

		
	


	

	

		
Link to post

		
			
		
		
			
		
		

		
			
Share on other sites

			

	

		
	




	



					
						
    
							
							
								
  • 
									1 year later...
								
    • 
							
						

					
					
					
				

					

					
					







	

	

	

		

			


	
		Albinos4210
	

			
		

		

			

				

Albinos4210
				

			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
{if $categories}
<ul id="mega-menu-6" class="mega-menu">
{foreach $categories as $cat}
{if $cat->visible}
<li>
<a {if $category->id == $cat->id} class="selected"{/if} href="catalog/{$cat->url}" >{$cat->name}</a>

{if $cat->subcategories}
{* если есть subcategories *}
<ul>
{foreach $cat->subcategories as $sub}
<li>
<a {if $category->id == $sub->id} class="selected"{/if} href="catalog/{$sub->url}" >{$sub->name}</a>
</li>
 
 
{/foreach}
<li>
</li>
</ul>
{/if}
</li>
{/if}
{/foreach}
</ul>
{/if}



Подскажите пожалуйста как сделать что бы колонки были в столбик а не в строку. (разбить <ul> на 4 части)
 
{if $level == 1 && ($c@iteration%10 == 0 && !$c@last)}
нашел вот это


			
		


		
			

				
					
				
				
			

		

		
	


	

	

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

		
		
	



	

	

		

			×
			
		

		

	



						
					
				
					
				
			
			
    
				
					
						
					
						
					
				
				
					
  • 

	

    • 
				
			

		

	



			
		

	

	
		

			
				

					


    
          Share
    

    

				

			
			

				


	

	
		Followers
		0
	


			

			
		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
			
			



	

		×
		

			
				

					
				

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •