Показать сообщение отдельно
  #1 (permalink)  
Старый 30.03.2011, 14:45
Новичок на форуме
Отправить личное сообщение для gellir Посмотреть профиль Найти все сообщения от gellir
 
Регистрация: 30.03.2011
Сообщений: 2

Меню для сайта
Есть javascript menu для сайта:
Код:
<html>
<head>
<script language="JavaScript" type="text/javascript">
var supported = (document.all || (document.getElementById && !window.opera));

function hide(){
	var subNav = document.getElementById('menu');
	for (var i=0;i<subNav.getElementsByTagName('ul').length;i++){
	if(subNav.getElementsByTagName('ul')[i].id != '')
		subNav.getElementsByTagName('ul')[i].style.display='none';
	}
}

function block(i){
	if(!supported)return;
	var x = document.getElementById(i);
	with(x.style)
	{
	display == 'none' ? display = 'block' : display = 'none';
	}
	getIt();
}

function getIt()
{
	var status = new Object;
	var menu = document.getElementById('menu');	
	var uls = menu.getElementsByTagName('ul');
	for(i=0;i<uls.length;i++){
	var allids = uls[i].id;
	if(allids){
	status[allids] = uls[i].style.display;
	document.cookie = allids+'='+status[allids];
		}
	}
}

function setProp(id,value) 
{
	var styleObj = document.getElementById(id); 
	if(styleObj != null)
	{
	styleObj.style.display = value;
	}
}

function assignCookie()
{
	if(!document.cookie || document.cookie == ' ')
	{
	var menu = document.getElementById('menu');
	var ul = menu.getElementsByTagName('ul');
	for(i=0;i<ul.length;i++)
	{
		var ids = ul[i].id;
		if(ids)
		{
			var styles = ul[i].style.display;
			setProp(ids,styles);
			}
		}
	}else if(document.cookie && document.cookie != ' ')
	{
		var allCookies = document.cookie;
		var cookies = allCookies.split('; ');
		for(var j=0;j<cookies.length;j++)					
	{
		var values = cookies[j].split('=');
		var idc = values[0];
		var stl = values[1];
		setProp(idc,stl);
		}
	}
}
window.onload = function(){hide();assignCookie();}
</script>

<style type="text/css">

.toplink{ 
	border-bottom: 1px #111111 solid; 
	}
#menu{
	position: absolute;
	top: 25%;
	left: 5%;
	width: 150px;
	}
#menu ul{		
	list-style: none;
	margin: 0;
	padding: 0;
	}

#menu ul li{
	border-bottom: 1px solid black;
	list-style: none;
	margin-left: 5px;
	padding-left: 1em;
	text-indent: -1em;
	
	}
#menu ul li.sub{
	margin-left: 1em;
	padding-left: 1em;
	text-indent: -1em;
	border: none;
	}	


#menu li a.navw:link{
	font-size: 8pt;
	color: #111111;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	}
#menu li a.navw:visited{
	font-size: 8pt;
	color: #111111;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	}
#menu li a.navw:active{
	font-size: 8pt;
	color: #111111;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	}
#menu li a.navw:hover{
	font-size: 8pt;
	color: #999999;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	text-decoration:none;
	}
#menu li a.navh:link{
	 font-size: 8pt;
	 color: #111111;
	 font-weight:bold; 
	 font-family: Verdana,Arial,Helvetica,sans-serif;
	 text-decoration:none;
	 }
#menu li a.navh:visited{
	 font-size: 8pt;
	 color: #111111;
	 font-weight:bold; 
	 font-family: Verdana,Arial,Helvetica,sans-serif;
	 text-decoration:none;
	 }
#menu li a.navh:active{
	 font-size: 8pt;
	 color: #111111;
	 font-weight:bold; 
	 font-family: Verdana,Arial,Helvetica,sans-serif;
	 text-decoration:none;
	 }
#menu li a.navh:hover{
	 font-size: 8pt;
	 color: #999999;
	 font-weight:bold; 
	 font-family: Verdana,Arial,Helvetica,sans-serif;
	 text-decoration:none;
	 }

</style>
</head>

<body>

<div id="menu">
	<ul>
		<li><a href="javascript:;" class="navh">→ Home</a> </li>
	</ul>
	<ul>
		<li><a href="javascript:;" class="navh" onclick="block('one');return false">→ Javascript</a></li>
	</ul>
	<ul id="one" style="display: block; ">
		<li class="sub"><a href="javascript:;" class="navw">• HTML and JavaScript</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Variables and strings</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Functions</a></li>
	</ul>
	<ul>
		<li><a href="javascript:;" class="navh" onclick="block('two');return false">→ CSS</a></li>
	</ul>
	<ul id="two" style="display: block; ">
		<li class="sub"><a href="javascript:;" class="navw">• Properties</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Utilities</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Selectors</a></li>
	</ul>
	<ul>
		<li><a href="javascript:;" class="navh" onclick="block('three');return false">→ DOM</a></li>
	</ul>
	<ul id="three" style="display: none; ">
		<li class="sub"><a href="javascript:;" class="navw">• References</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Utilities</a></li>
	</ul>
	<ul>
		<li><a href="javascript:;" class="navh" onclick="block('four');return false">→ Web Design</a></li>
	</ul>
	<ul id="four" style="display: block; ">
		<li class="sub"><a href="javascript:;" class="navw">• Graphics</a></li>
  		<li class="sub"><a href="javascript:;" class="navw">• Colors</a></li>
	</ul>
</div>


</body>
</html>
Как сделать чтоб при открытом блоке one, кликнув по блоку two, блок one свернулся, а блок two развернулся?
Ответить с цитированием