Многоуровневое вертикальное меню

[tvenjoy]

Ребят помогите что то наподобие вот этого состряпать
http://cssmenumaker.com/menu/blue-and-white-css3-flyout-menu

[tvenjoy]

http://forum.simplacms.ru/discussion/1746/eschyo-odno-menyu-posredstvom-jquery

ссылка битая (

[filth]

Сам скрипт

$('#categories li').hover(function(){
			$(this).children('ul').stop(false, true).fadeIn(500);
		},function(){
			$(this).children('ul').stop(false, true).fadeOut(500);
		});
	});

Стили:

#categories {
       position: relative;
       z-index: 100;
padding: 0;
list-style: none;
       border-bottom: solid 1px grey;
       border-radius: 6px;
}

#categories li {
position: relative;
      	width: 100%;
       list-style: none;
       border-radius: 6px;
       
}
#categories li a {
       text-decoration: none;
font-size: 14px;
font-fanily: arial;
color: #000;
padding: 11px;
text-align:center;
       border-radius: 6px;
       border-style: solid;
       border-width: 1px;
       border-color: grey;
       border-bottom: none;
               
}
#categories li a.selected {
background: #eb540d;
color: #fff;
}
#categories li a:hover {
background: #eb540d;
color: #fff;
}
#categories li ul {
       display:none;

}
#categories ul ul li:first-child > a:after {
content: '';
position: absolute;
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #000;
}
#categories ul ul li {
opacity: 0.95;
}
#categories ul ul a {
       border: solid 1px #c0c0c0;
       border-bottom: none;
}
#categories ul ul {
       border: none;
       background: none;
       border-radius: 3px;
       width: 80%;
       position: absolute;
       top: 0px;
       left: 100%;
       border-bottom: solid 1px #c0c0c0;
       border-radius: 6px;
}

Вывод в index.tpl (если у вас не так ):

<!-- Меню каталога --> 			{* Рекурсивная функция вывода дерева категорий *}			<ul id="categories">												{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}">{/if}                                         <a {if $category->id == $c->id}class="selected"{/if} href="/catalog/{$c->url}" data-category="{$c->id}" alt="{$c->meta_description}">{$c->name}</a>						{categories_tree categories=$c->subcategories}					</li>				{/if}			{/foreach}			</ul>			{/if}			{/function}			{categories_tree categories=$categories}			</ul>			<!-- Меню каталога (The End)-->

Да и для стандартного шаблона версии 2.1 и выше: в style.css #left overfow: visible; (по умолчанию hidden)

[tvenjoy]

а куда скрипт ставить?

[filth]

в index.tpl, можно в голову, примерно так:

{literal}<script>$(function() {$('#categories li').hover(function(){				$(this).children('ul').stop(false, true).fadeIn(500);			},function(){				$(this).children('ul').stop(false, true).fadeOut(500);			});		});</script>{/literal}

[tvenjoy]

+1 к карме спасибо большое

[tvenjoy]

не могу понять меню поверх другого меню и первая категория большая

/* Some stylesheet reset */#cssmenu > ul{	list-style: none;	margin: 0;	padding: 0;	vertical-align: baseline;	line-height: 1;        height: 0px;        }/* The container */#cssmenu > ul {	display: block;	position: relative;	width: 150px;        height: 0px;}	/* The list elements which contain the links */	#cssmenu > ul li {        	width: 100%;        list-style: none;		display: block;		position: relative;		margin: 0;		padding: 0;		width: 150px;		}		/* General link styling */		#cssmenu > ul li a {			/* Layout */			display: block;			position: relative;			margin: 0;			border-top: 1px dotted #fff;			border-bottom: 1px dotted #d9d9d9;			padding: 11px 20px;			width: 110px;			/* Typography */			font-family:  Helvetica, Arial, sans-serif;			color: #3dafea;			text-decoration: none;			text-transform: uppercase;			text-shadow: 0 1px 0 #fff;			font-size: 13px;			font-weight: 300;			/* Background & effects */			background: #eaeaea;		}		/* Rounded corners for the first link of the menu/submenus */		#cssmenu > ul li:first-child>a {			border-top-left-radius: 4px;			border-top-right-radius: 4px;			border-top: 0;		}		/* Rounded corners for the last link of the menu/submenus */		#cssmenu > ul li:last-child>a {			border-bottom-left-radius: 4px;			border-bottom-right-radius: 4px;			border-bottom: 0;		}		/* The hover state of the menu/submenu links */		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {			color: #fff;			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);			background: #54cdf1;			background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);			background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 			background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);			background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);			border-color: transparent;		}		/* The arrow indicating a submenu */		#cssmenu > ul .has-sub>a::after {			content: '';			position: absolute;			top: 16px;			right: 10px;			width: 0px;			height: 0px;			/* Creating the arrow using borders */			border: 4px solid transparent;			border-left: 4px solid #3dafea; 		}		/* The same arrow, but with a darker color, to create the shadow effect */		#cssmenu > ul .has-sub>a::before {			content: '';			position: absolute;			top: 17px;			right: 10px;			width: 0px;			height: 0px;			/* Creating the arrow using borders */			border: 4px solid transparent;			border-left: 4px solid #fff;		}		/* Changing the color of the arrow on hover */		#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, .25);		}			/* THE SUBMENUS */		#cssmenu > ul ul {			position: absolute;			left: 150px;			top: -9999px;			padding-left: 5px;			opacity: 0;			/* The fade effect, created using an opacity transition */			-webkit-transition: opacity .3s ease-in;			-moz-transition: opacity .3s ease-in;			-o-transition: opacity .3s ease-in;			-ms-transition: opacity .3s ease-in;		}		/* Showing the submenu when the user is hovering the parent link */		#cssmenu > ul li:hover>ul {			top: 0px;			opacity: 1;		}

[yurik417]

Вот здесь уже стряпано все за вас: Вертикальное многоуровневое меню на jquery http://masscode.ru/index.php/k2/item/35-limenuvert

[delprofile]

2 yurik417 на даты смотрите!