jQuery menu

E

erik_1001

Registered
Здравейте. Сега ще ви покажа едно малко проблемно меню на три нива (засега работят само две). Причината да не бъде ЦСС и съподчинени елементи, се крие в това, че втория ред всъщност ще се скролва наляво и надясно и за да се случва това, рамката трябва да е със зададено overflow: hidden.
http://jsfiddle.net/8249w/9/embedded/ ето тук при цъкане на result може да се види работещо със сигурност при опера и хром
иначе ето го само кода (не става под IE)
Код: 
<html>
<head>
<style type="text/css">
#tableMenu .window
{
	padding: 0px; 
	position: absolute; 
	margin-top: 48px;
	margin-left: 13px;
	
	width: 892px ; 
	height: 24px !important; 
	border: 4px solid orange; 
	overflow: hidden; 
	white-space: nowrap;    
	float: left;    
	background-color:black;

 }
 
	#tableMenu .window .content
	{ 
		display:none;
		position:absolute;
		top: 0px;
		left: 2px;
		padding: 0px;
		color: red;
		width:auto;
		padding-left: 0px;
		margin: 0px;
		margin-left: 20px;
	}

		#tableMenu .window .content ul.cat
		{


		}
			
			#tableMenu .window .content li.cat
			{
				list-style:none;
				
				position:relative;
				display:inline;
				top: 2px;
				right: 0px;
				left: 0px;
				padding-top: 3px;
				padding-right: 2px;
				padding-bottom: 4px;
		
				border-left: 1px solid orange; 
				border-right: 1px solid orange; 
			}

		
			
			#tableMenu .window .button
			{
						background-color:blue;
						color: black;
						cursor:hand;	cursor:pointer;
						
						position: absolute;
						right: auto;
						left: 0px;
						padding-top: 3px;
						width:18px;
						height: inherit;
						text-align:left;
			}

					#tableMenu .window .button:last-child 
					{
						left:auto;
						right: 0px;
						text-align:right;
					}	
						

							
/*______________________________________________________________________________________________*/



#tableMenu ul.main 
{
	display: inline;
	float: left;
	left:0px;
	padding: 0px;
	height: auto;
	

	color: orange;
}

	#tableMenu ul.main li.main
	{
		list-style:none;
		
		position: relative;
		float: left;
		padding: 2px;
		margin-right: 10px;
		width: 160px;
		height: 24px;
		
		background-color: black;
		color: orange;
		border: 4px solid orange;
	}
	
		#tableMenu ul.main li.main:last-child
		{
			margin-right: 0px;
		}


		
/*****************************************************************************************************/

div#tableMenu	div.subcontent div.content div.sub_content ul.sub li.sub {}
.subcontent
{
	position:absolute;
	margin-top: 76px;
	background-color: pink;
	width: 892px;
	border: 4px solid green;
	height: 29px;
	padding: 0px;
}

.subcontent .content .sub_content
{
	position:absolute;
	float: left;
	margin: 0px;
	margin-left: -40px;
}
.subcontent .content ul.sub_content li.sub
{
	position:relative;
	list-style:none;
	float: left;
}


.subcontent .button 
{
	position:absolute;
	right: 0px;
	background-color:red;
	padding: 0px;
	border: 1px solid black;
	height: 13px;
	width: 10px;
}
.subcontent .button:last-child
{
	position:absolute;
	right: 0px;
	bottom: 0px;
}

div#tableMenu	div.subcontent div.content ul.sub_content
{
	visibility: hidden;
}

.hover
{
    color:green;
    font-size: 20px;
    background-color:green;
}
</style>



</head>
<body>




<div id="tableMenu">

	

	<ul class="main">
		<li class="main" name="t_01">първо	</li>
		<li class="main" name="t_02">второ</li>
		<li class="main" name="t_03">трето</li>
		<li class="main" name="t_04">четвърто</li>
		<li class="main" name="t_05">пето</li>
	</ul>
	
	
	
	<div class="window" style="left: -5px;">
		<ul class="content" name="t_01">
			<li class="cat" name="t_01_01"> <input type="checkbox" id="id210" /> <label for="id310"> cat1.1</label></li>
			<li class="cat" name="t_01_02"> <input type="checkbox" id="id220" /> <label for="id320"> cat1.2</label></li>
			<li class="cat" name="t_01_03"> <input type="checkbox" id="id230" /> <label for="id330"> cat1.3</label></li>
			<li class="cat" name="t_01_04"> <input type="checkbox" id="id240" /> <label for="id330"> cat1.4</label></li>
		</ul>
	
		<ul class="content" name="t_02">
			<li class="cat" name="t_02_01"> <input type="checkbox" id="id210" /> <label for="id310"> cat2.1</label></li>
			<li class="cat" name="t_02_02"> <input type="checkbox" id="id220" /> <label for="id320"> cat2.2</label></li>
			<li class="cat" name="t_02_03"> <input type="checkbox" id="id230" /> <label for="id330"> cat2.3</label></li>
			<li class="cat" name="t_02_04"> <input type="checkbox" id="id240" /> <label for="id330"> cat2.4</label></li>
		</ul>
		
		<ul class="content" name="t_03">

			<li class="cat"> <input type="checkbox" id="id210" /> <label for="id310"> cat3.1</label></li>
			<li class="cat"> <input type="checkbox" id="id220" /> <label for="id320"> cat3.2</label></li>
			<li class="cat"> <input type="checkbox" id="id230" /> <label for="id330"> cat3.3</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat3.4</label></li>
		</ul>
		
		<ul class="content" name="t_04">
			<li class="cat"> <input type="checkbox" id="id210" /> <label for="id310"> cat4.1</label></li>
			<li class="cat"> <input type="checkbox" id="id220" /> <label for="id320"> cat4.2</label></li>
			<li class="cat"> <input type="checkbox" id="id230" /> <label for="id330"> cat4.3</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat4.4</label></li>
		</ul>
		
		<ul class="content" name="t_05">
			<li class="cat"> <input type="checkbox" id="id210" /> <label for="id310"> cat5.1</label></li>
			<li class="cat"> <input type="checkbox" id="id220" /> <label for="id320"> cat5.2</label></li>
			<li class="cat"> <input type="checkbox" id="id230" /> <label for="id330"> cat5.3</label></li>
			<li class="cat"> <input type="checkbox" id="id240" /> <label for="id330"> cat5.4</label></li>
		</ul>
		
		<div href="#" class="button">◄</div>
		<div href="#" class="button">►</div>
	</div>
	
	

	<div class="subcontent">
		<div class="content" name="t_01">
			<ul class="sub_content" name="t_01_01">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub1.1.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub1.1.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub1.1.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub1.1.4</label></li>
			</ul>
			<ul class="sub_content" name="t_01_02">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub1.2.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub1.2.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub1.2.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub1.2.4</label></li>
			</ul>
			
			<ul class="sub_content" name="t_01_03">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub1.3.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub1.3.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub1.3.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub1.3.4</label></li>
			</ul>
			
			<ul class="sub_content" name="t_01_04">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub1.4.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub1.4.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub1.4.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub1.4.4</label></li>
			</ul>
		</div>
		<div class="content" name="t_02">
			<ul class="sub_content" name="t_02_01">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub2.1.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub2.1.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub2.1.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub2.1.4</label></li>
			</ul>
			<ul class="sub_content" name="t_02_02">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub2.2.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub2.2.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub2.2.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub2.2.4</label></li>
			</ul>
			
			<ul class="sub_content" name="t_02_03">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub2.3.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub2.3.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub2.3.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub2.3.4</label></li>
			</ul>
			
			<ul class="sub_content" name="t_02_04">
				<li class="sub"> <input type="checkbox" id="id210" /> <label for="id310"> sub2.4.1</label></li>
				<li class="sub"> <input type="checkbox" id="id220" /> <label for="id320"> sub2.4.2</label></li>
				<li class="sub"> <input type="checkbox" id="id230" /> <label for="id330"> sub2.4.3</label></li>
				<li class="sub"> <input type="checkbox" id="id240" /> <label for="id330"> sub2.4.4</label></li>
			</ul>
		</div>
	
		<div href="#" class="button"></div>
		<div href="#" class="button"></div>
	</div>
</div>


<script type='text/javascript' src='catmenu.js'></script>	
<script type='text/javascript' src='query-1.5.min.js'></script>	
<script type='text/javascript'>
$(function()
	{
		$('#tableMenu ul.main > li.main').mouseenter(
			function()
			{
				var name = $(this).attr('name'); 
				
				returnNormalMain();
				
				$(this).css('backgroundColor', 'orange');
				$(this).css('color', 'black');
				$(this).css('border', '4px solid black');
				$(this).css('borderBottom', '4px solid orange');
				$('#tableMenu div.window > ul[name^="' + name + '"]').fadeIn(100); console.log('vkarvane pri main:hover');
			}
		)
		
		$('#tableMenu ul.main > li.main').mouseleave(
			function()
			{
				hideCatContent();
				
				$('#tableMenu div.window').hover(function(){$('#tableMenu div.window').addClass('hovered');},function(){$('#tableMenu div.window').removeClass('hovered');});
				
				setTimeout(function(){
					if ($('#tableMenu div.window').hasClass('hovered')==true)
					{
						console.log('mouseenter na "window" i nishto ne pravim')
					}
					else
					{
						console.log('Kogato si mouseleave na "main" elementite i ne si mouseenter na "window" se skrivat vsichki kontenti ');
						returnNormalMain();
						$('#tableMenu div.window > ul').fadeOut(100);
					};
				}, 0)
			}
		)
	}
)

//other functions////other functions////other functions////other functions////other functions////other functions////other functions////other functions////other functions////other functions//


function returnNormalMain()										//main row looks normally
{
	z = $('#tableMenu ul.main > li.main');
	$(z).css('backgroundColor', 'black');
	$(z).css('color', 'orange');
	$(z).css('border', '4px solid orange');
}

function hideCatContent()										//hide category content
{
	$('#tableMenu div.window').bind(
		'mouseleave', 
		function() 
		{
		console.log('mouseleave na "window" vrushtame izhodno polosjenie')
		$('#tableMenu div.window > ul').fadeOut(100);
		returnNormalMain();
		}
	)
}
</script>	
</body>
</html>

Бъга може да го видите лесно - при бързо минаване през няколко главни елемента, съдържание въпреки ховъра се скрива. Някакви идеи как да го оправя, или ако не, то поне за скролването да не бъде задавано overflow:hidden. Като цяло всякакви идеи приемам. :D
Благодаря предварително.
 
Предполагам че съм се хвърлил малко в дълбоките води, но поне нещо като съвет или връзка към нещо подобно няма да ми е излишно.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе