Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2011, 13: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 развернулся?
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2011, 22:57
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Если вам нужно только то, что вы написали, то так:
function block(i){
 if(!supported)return;
 var x = document.getElementById(i);
 with(x.style)
 {
 display == 'none' ? display = 'block' : display = 'none';
 if (display == 'block' && i == 'two')
  document.getElementById('one').style.display = 'none';
 }
 getIt();
}


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

спасибо за ответ) но мне нужно чтоб это все это действовало и на другие блоки и не только на те которые в примере потому что их будет намного больше. заранее спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2011, 11:47
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Ну вот так тогда:
function block(i){
 if(!supported)return;
 var x = document.getElementById(i);
 var bl = document.getElementsByTagName('ul');
 with(x.style)
 {
 display == 'none' ? display = 'block' : display = 'none';
 for (j = 0; j < bl.length; j++) {
  if (display == 'block' && bl[j].id && bl[j].id != i)
   bl[j].style.display = 'none';
  }
 }
 getIt();
}

будет работать для всех списков ul, у которых есть id.
Такие задачи вообще-то проще с jquery решаются.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 14:31
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 13:55
Как переделать простое меню для сайта на javascript? denspb Работа 2 16.07.2010 00:25
Меню сайта на JS lawer Работа 6 26.09.2009 20:47
Проблема с меню для кнопки в Гриде progi2007 ExtJS 0 03.08.2009 13:16