многоуровневое вертикальное раздвижное меню

supernet95 · March 1, 2012

пытался найти код многоуровневого раздвижного вертикального меню, смысл очень просто, используя любые методы сделать вертикальное меню где много уровней раздвижения (именно верх, вниз ). думаю понятно. если не сложно помогите. извените если написал непонятно, спрашивате будц отвечать вам на вопросы

ShootingStar · March 1, 2012

Может поможет: один, два, три

css код можно увидеть файрбагом в разделе head

supernet95 · March 1, 2012

On 3/1/2012 at 6:42 PM, ShootingStar said:
Может поможет: один, два, три
css код можно увидеть файрбагом в разделе head

Да примерно то что нужно, спасибо, но к сожелению таких я нашол много, а мне надо бы чтоб была много уровневая, тут всего 1 уровень

Switch74 · March 1, 2012

On 3/1/2012 at 6:46 PM, supernet95 said:

On 3/1/2012 at 6:42 PM, ShootingStar said:
Может поможет: один, два, три
css код можно увидеть файрбагом в разделе head
Да примерно то что нужно, спасибо, но к сожелению таких я нашол много, а мне надо бы чтоб была много уровневая, тут всего 1 уровень

так запихай в каждый следующий уровень такую же конструкцию

supernet95 · March 1, 2012

On 3/1/2012 at 7:07 PM, Switch74 said:

On 3/1/2012 at 6:46 PM, supernet95 said:

On 3/1/2012 at 6:42 PM, ShootingStar said:
Может поможет: один, два, три
css код можно увидеть файрбагом в разделе head
Да примерно то что нужно, спасибо, но к сожелению таких я нашол много, а мне надо бы чтоб была много уровневая, тут всего 1 уровень
так запихай в каждый следующий уровень такую же конструкцию

пытался, но при нажатии на 2уровень закрывается 1 уровень как то так)

Switch74 · March 1, 2012

ну значит такая реализация, ща попробую быстренько что-нить сделать, надеюсь jquery можно использовать

вот небольшой примерчик


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#menu{display:block;width:200px;}

#menu ul{display:block;padding-left:10px;list-style-type:none;}
#menu a{cursor:pointer;}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$('#menu ul').css({'display':'none'});
	$('#menu a').live('click',function(event)
	{
		var ul = $(this).next('ul');
		$(ul).slideToggle('400');
	});
});
</script>
</head>
<body>
	<a>href</a>
	<ul id="menu">
		<li>
			<a>link1</a>
		</li>
		<li>
			<a>link2</a>
			<ul>
				<li>
					<a>link21</a>
				</li>
			</ul>
		</li>
		<li>
			<a>link3</a>
			<ul>
				<li>
					<a>link31</a>
					<ul>
						<li>
							<a>link311</a>
						</li>
					</ul>
				</li>
				<li>
					<a>link32</a>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>

Edited March 1, 2012 by Switch74

supernet95 · March 2, 2012

On 3/1/2012 at 7:34 PM, Switch74 said:

ну значит такая реализация, ща попробую быстренько что-нить сделать, надеюсь jquery можно использовать

вот небольшой примерчик


<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#menu{display:block;width:200px;}

#menu ul{display:block;padding-left:10px;list-style-type:none;}
#menu a{cursor:pointer;}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$('#menu ul').css({'display':'none'});
	$('#menu a').live('click',function(event)
	{
		var ul = $(this).next('ul');
		$(ul).slideToggle('400');
	});
});
</script>
</head>
<body>
	<a>href</a>
	<ul id="menu">
		<li>
			<a>link1</a>
		</li>
		<li>
			<a>link2</a>
			<ul>
				<li>
					<a>link21</a>
				</li>
			</ul>
		</li>
		<li>
			<a>link3</a>
			<ul>
				<li>
					<a>link31</a>
					<ul>
						<li>
							<a>link311</a>
						</li>
					</ul>
				</li>
				<li>
					<a>link32</a>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>

К сожелению почему-то не сварачивается.

так же вот нашол вот такое меню, давольно симпотичное, но к сожелению если кликнуть по 2 уровню закрывается 1 уровень http://www.zaucoz.ru/news/vertikalnoe_razdvizhnoe_menju_dlja_ucoz/2011-07-29-944?l_QwPv

может что сможешь понять

Edited March 2, 2012 by supernet95

Switch74 · March 2, 2012

в смысле не сворачивается, кликни по нему еще раз и оно свернется

supernet95 · March 2, 2012

On 3/2/2012 at 3:59 AM, Switch74 said:
в смысле не сворачивается, кликни по нему еще раз и оно свернется

а вот извени мой касяк, просто отличненько, огромное спасибо

On 3/2/2012 at 3:59 AM, Switch74 said:
в смысле не сворачивается, кликни по нему еще раз и оно свернется

а и ещё вопросик, id="menu" у меня уже занят, чтобы твой скрипт работал надо переименовать так:

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0px;padding:0px;}

html,body{height:100%;}

#menuser{display:block;width:200px;}

#menuser ul{display:block;padding-left:10px;list-style-type:none;}

#menuser a{cursor:pointer;}

</style>

$(document).ready(function()

{

$('#menuser ul').css({'display':'none'});

$('#menuser a').live('click',function(event)

{

var ul = $(this).next('ul');

$(ul).slideToggle('400');

});

</script>

</head>

<body>

<li>

</li>

<li>

<ul>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

<ul>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</li>

</ul>

</body>

</html>

правильно? или надо ещё гдето чтото переименовывать? ну или можешь как нить переделать чтобы блок не menu а menuser назывался ну или ещё как нибудь не по популярному

Edited March 2, 2012 by supernet95

Switch74 · March 2, 2012

да, ты правильно догадался

supernet95 · March 2, 2012

http://imglink.ru/show-image.php?id=e80da9e61a2671e5b85ab02c945e2796 вот после вставки на сайт такая тема

On 3/2/2012 at 4:32 AM, Switch74 said:
да, ты правильно догадался

http://imglink.ru/show-image.php?id=e80da9e61a2671e5b85ab02c945e2796 вот после вставки на сайт такая тема

Switch74 · March 2, 2012

On 3/2/2012 at 4:47 AM, supernet95 said:
http://imglink.ru/show-image.php?id=e80da9e61a2671e5b85ab02c945e2796 вот после вставки на сайт такая тема

ну это у тебя PHP ругается, я не знаю что там у тебя за движок, что ему не нравится обычный js, возможно в tpl и нельзя вставлять его, попробуй вынести скрипты и стили в отдельные файлы, так же можно попробовать данный код


$('#menuser ul').css({'display':'none'});

заменить на


$('#menuser ul').css('display','none');

supernet95 · March 2, 2012

On 3/2/2012 at 5:38 AM, Switch74 said:
On 3/2/2012 at 4:47 AM, supernet95 said:
http://imglink.ru/show-image.php?id=e80da9e61a2671e5b85ab02c945e2796 вот после вставки на сайт такая тема
ну это у тебя PHP ругается, я не знаю что там у тебя за движок, что ему не нравится обычный js, возможно в tpl и нельзя вставлять его, попробуй вынести скрипты и стили в отдельные файлы, так же можно попробовать данный код
$('#menuser ul').css({'display':'none'});
заменить на
$('#menuser ul').css('display','none');

движок cms, попытался вставить через {include file=""} то вылезло столько ошибок, что браузер завис. попытался вставить 2 вариант, пишет туже самую ошибку

Switch74 · March 2, 2012

ну тогда остается только один вариант, вынести js и css в отдельные файлы

supernet95 · March 2, 2012

On 3/2/2012 at 8:13 AM, Switch74 said:
ну тогда остается только один вариант, вынести js и css в отдельные файлы

попыался так сделать вылезло очного ошибок и браузер завис, я вносил через {include file="домен/путь к файлу"}

supernet95 · March 2, 2012

сделал так заработало

$(document).ready(function()

{

$("#menuse ul").css("display", "none");

$("#menuse a").live('click', function(event)

{

var ul = $(this).next('ul');

$(ul).slideToggle('400');

});

</script>

Switch74 · March 2, 2012

ты же говорил, что второй вариант ту же ошибку выдает :rolleyes:

ну раз заработало - это хорошо

Sign In

многоуровневое вертикальное раздвижное меню

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information