Меню, раскрывающееся при отключении JS

kservice · November 24, 2009

Есть меню, реализованое с помощью Javascript

<script type=text/javascript>
function clickHandler(e)
{
	var strelka, targetId, srcElement, targetElement;
	srcElement = e.srcElement ? e.srcElement : e.target;
	if (srcElement.className == "outline")
	{
		targetId = srcElement.id + "details";

		strelka = srcElement.id + "str";
		targetElement = document.getElementById(targetId);

		if (targetElement.style.display == "none")
		{
			targetElement.style.display = "";
			document.getElementById(strelka).src="ksmenu/expanded.gif";
		}
		else
		{
			targetElement.style.display = "none";
			document.getElementById(strelka).src="ksmenu/collapsed.gif";
		}
	}
}
</SCRIPT>

Код HTML выглядит так:

<DIV  id=menu class=menu_left> 
	   <B style="cursor: pointer" id=Out1 class=outline onclick=clickHandler(event)><IMG id=Out1str src="ksmenu/treug.gif" width=7 height=10>Меню 1</B>
		 <DIV style="DISPLAY: none" id=Out1details class=outline>
					   <A href="menu11.shtml">Строка 1</A>
					   <A href="menu12.shtml">Строка 2</A>
					   <A href="menu13.shtml">Строка 3</A>
					   <A href="menu14.shtml">Строка 4</A>
					   <A href="menu15.shtml">Строка 5</A>
							  </DIV>
</DIV>

CSS:

#menu div.outline a {
	padding: 5px 30px; 	background: #eee; 
	display: block;
	border-bottom: 1px solid #ddd; 
	color:#005050;}

Сейчас при включенной поддержке Javascript меню изначально свернуто и разворачивается при наведении курсора и левом клике и при отключении Javascript естественно не разворачивается.

Вопрос: как сделать, чтобы при отключении Javascript меню изначально было развернуто?

mishka · November 24, 2009

Чтобы меню при отключенном джс было доступно то его надо скрывать не в css, а именно самим джс. Чтобы display:none прописывал сам джс при загрузке. Ну а потом при клике display:block

Edited November 24, 2009 by mishka2

kservice · November 24, 2009

Чтобы меню при отключенном джс было доступно то его надо скрывать не в css, а именно самим джс. Чтобы display:none прописывал сам джс при загрузке. Ну а потом при клике display:block

Т.е. JS надо переделать? Моих знаний на это не хватает. Если не сложно - помогите.

mishka · November 25, 2009

Я тоже не силен в джс, поэтому мой код врядли можна назвать оптимальным, но всеже чтото набросал

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script type="text/javascript">
	<!--
		function initScript(){
			var _menu=document.getElementById('menu');
			var _itemMenu=_menu.getElementsByTagName('ul');
			var _btn=_menu.getElementsByTagName('a');

			for(var i=0;i<_itemMenu.length;i++){
				_itemMenu[i].style.display='none';
			}
			for(var i=0;i<_btn.length;i++){
				if(_btn[i].className.indexOf('btn')!=-1){
					_btn[i].onclick=function(){
						var _openBlock=this.parentNode.getElementsByTagName('ul');

						if(_openBlock[0].style.display=='none'){
							_openBlock[0].style.display='block';
						}else{
							_openBlock[0].style.display='none'
						}
						return false;
					}
				}
			}
		}

		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//-->
	</script>
</head>
<body>
<ul id="menu">
	<li><a class="btn" href="#">lorem</a>
		<ul>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
		</ul>
	</li>
	<li><a class="btn" href="#">lorem</a>
		<ul>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Justnewone · November 25, 2009

Я тоже не силен в джс, поэтому мой код врядли можна назвать оптимальным, но всеже чтото набросал

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script type="text/javascript">
	<!--
		function initScript(){
			var _menu=document.getElementById('menu');
			var _itemMenu=_menu.getElementsByTagName('ul');
			var _btn=_menu.getElementsByTagName('a');

			for(var i=0;i<_itemMenu.length;i++){
				_itemMenu[i].style.display='none';
			}
			for(var i=0;i<_btn.length;i++){
				if(_btn[i].className.indexOf('btn')!=-1){
					_btn[i].onclick=function(){
						var _openBlock=this.parentNode.getElementsByTagName('ul');

						if(_openBlock[0].style.display=='none'){
							_openBlock[0].style.display='block';
						}else{
							_openBlock[0].style.display='none'
						}
						return false;
					}
				}
			}
		}

		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//-->
	</script>
</head>
<body>
<ul id="menu">
	<li><a class="btn" href="#">lorem</a>
		<ul>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
		</ul>
	</li>
	<li><a class="btn" href="#">lorem</a>
		<ul>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
			<li><a href="#">lorem</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Я тож не специалист, но мне кажется, что лучше правда оставить в сразу display:none в CSS, а display:block прописать в noscript. Может не валидно будет, но не будет броска при загрузке. Если ошибаюсь, поправьте, пожалуйста.

Great Rash · November 25, 2009

Вот скажите мне, неужели вы правда видели пользователя, который отключает яваскрипт?

mishka · November 25, 2009

Я тож не специалист, но мне кажется, что лучше правда оставить в сразу display:none в CSS, а display:block прописать в noscript. Может не валидно будет, но не будет броска при загрузке. Если ошибаюсь, поправьте, пожалуйста.

Какого броска?

Можна и сразу display:none писать в css, а display:blok джсом делать. Но тогда при отклоченном джс меню будет закрыто и недоступно. Именно как это решить и спрашивал ТС.

Что за бросок?

Вот скажите мне, неужели вы правда видели пользователя, который отключает яваскрипт?

Незнаю, невидел, всеголишь решаю задачу ТС

Justnewone · November 25, 2009

Какого броска?
Можна и сразу display:none писать в css, а display:blok джсом делать. Но тогда при отклоченном джс меню будет закрыто и недоступно. Именно как это решить и спрашивал ТС.
Что за бросок?
Незнаю, невидел, всеголишь решаю задачу ТС

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

А по теме я ответил, для того чтобы при отключенном JS все работало - есть тег noscript, внутри которого и прописываются правила "че делать если JS отключен", в данном случае туда надо будет написать display:block

Например, для Вашей реализации. Сразу после скрипта

<noscript>
<style type="text/css">
#menu UL{display:block}
</style>
</noscript>

mishka · November 25, 2009

Бросок может быть, если медленный интернет или допустим, медленный сервер, меню сначала на какое-то время покажеца раскрытым, а затем, когда догрузится JS - схлопнется.
А по теме я ответил, для того чтобы при отключенном JS все работало - есть тег noscript, внутри которого и прописываются правила "че делать если JS отключен", в данном случае туда надо будет написать display:block
Например, для Вашей реализации. Сразу после скрипта

Да так действительно лучше.

kservice · November 25, 2009

Большое спасибо всем откликнувшмся. Немного проясню свою позицию. Что касается отключения JC - придумал не сам, вычитал у умных людей и с ними согласен. Что касается предложения mishka2 - спасибо за вариант и проделанный труд, но вряд ли он мне подойдет. Отрабатываю скелет уже около месяца, нашел указанный скрипт, немного доработал и получил почти все, что хотел. Если применить предложенный вариант - опять надо многое переделывать, великоват размер скрипта, да и непонятно как в других браузерах будет работать. Предполагаю, что есть более красивое и короткое решение, но пока ничего не получается. Один из вариантов таков: определить факт наличия поддержки JC и в зависимости от от этого поменять идентификатор (или класс). Если JS есть - оставить ID прежним, т.е. id=menu, а в CSS display:none. При отсутствии JC сделать id другим, например, id=menu_nojs и под него в CSS прописать display: block. В этом случае в HTML будет 2 фактически одиноковых div, но с разными id. Грубовато, конечно, но.. Но сделать такое изменение id не могу . Знаний не хватает. Раскрыть меню сразу легко: достаточно убрать из кода style="DISPLAY: none". Но и при поддержке JS оно будет развернутым. И хоть его потом можно свернуть, изюминка теряется, никто его сворачивать уже не будет. Попытка вставить в имеющийся скрипт что-то типа Element.style.display = "none" приводит или к нарушению работы всего скрипта, или к пропаданию всего меню. Сайт делаю для себя и глубокое изучение теории вряд ли мне нужно. Добросовестно пытался решить проблему сам, но не смог, поэтому попросил о помощи.

.... для того чтобы при отключенном JS все работало - есть тег noscript, внутри которого и прописываются правила "че делать если JS отключен", в данном случае туда надо будет написать display:block
Например, для Вашей реализации. Сразу после скрипта
<noscript>
<style type="text/css">
#menu UL{display:block}
</style>
</noscript>

А как сделать, чтобы при JS было #menu UL{display:none}?

Edited November 25, 2009 by kservice

Justnewone · November 25, 2009

Большое спасибо всем откликнувшмся. Немного проясню свою позицию. Что касается отключения JC - придумал не сам, вычитал у умных людей и с ними согласен. Что касается предложения mishka2 - спасибо за вариант и проделанный труд, но вряд ли он мне подойдет. Отрабатываю скелет уже около месяца, нашел указанный скрипт, немного доработал и получил почти все, что хотел. Если применить предложенный вариант - опять надо многое переделывать, великоват размер скрипта, да и непонятно как в других браузерах будет работать. Предполагаю, что есть более красивое и короткое решение, но пока ничего не получается. Один из вариантов таков: определить факт наличия поддержки JC и в зависимости от от этого поменять идентификатор (или класс). Если JS есть - оставить ID прежним, т.е. id=menu, а в CSS display:none. При отсутствии JC сделать id другим, например, id=menu_nojs и под него в CSS прописать display: block. В этом случае в HTML будет 2 фактически одиноковых div, но с разными id. Грубовато, конечно, но.. Но сделать такое изменение id не могу . Знаний не хватает. Раскрыть меню сразу легко: достаточно убрать из кода style="DISPLAY: none". Но и при поддержке JS оно будет развернутым. И хоть его потом можно свернуть, изюминка теряется, никто его сворачивать уже не будет. Попытка вставить в имеющийся скрипт что-то типа Element.style.display = "none" приводит или к нарушению работы всего скрипта, или к пропаданию всего меню. Сайт делаю для себя и глубокое изучение теории вряд ли мне нужно. Добросовестно пытался решить проблему сам, но не смог, поэтому попросил о помощи.
А как сделать, чтобы при JS было #menu UL{display:none}?

Ну так у Вас и так <DIV style="DISPLAY: none" id=Out1details class=outline>.

???

mishka · November 25, 2009

можна так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
	#menu div.outline a{
		padding:5px 30px;
		background:#eee;
		display:block;
		border-bottom:1px solid #ddd;
		color:#005050;
	}
	</style>
	<script type=text/javascript>
	function clickHandler(e)
	{
		var strelka, targetId, srcElement, targetElement;
		srcElement = e.srcElement ? e.srcElement : e.target;
		if (srcElement.className == "outline")
		{
			targetId = srcElement.id + "details";

			strelka = srcElement.id + "str";
			targetElement = document.getElementById(targetId);

			if (targetElement.style.display == "none")
			{
				targetElement.style.display = "";
				document.getElementById(strelka).src="ksmenu/expanded.gif";
			}
			else
			{
				targetElement.style.display = "none";
				document.getElementById(strelka).src="ksmenu/collapsed.gif";
			}
		}
	}
	</SCRIPT>
</head>
<body>
	<DIV id=menu class=menu_left>
		<B style="cursor: pointer" id=Out1 class=outline onclick=clickHandler(event)><IMG id=Out1str src="ksmenu/treug.gif" width=7 height=10>Меню 1</B>
		<DIV style="DISPLAY: none" id=Out1details class=outline>
			<A href="menu11.shtml">Строка 1</A>
			<A href="menu12.shtml">Строка 2</A>
			<A href="menu13.shtml">Строка 3</A>
			<A href="menu14.shtml">Строка 4</A>
			<A href="menu15.shtml">Строка 5</A>
		</DIV>
	</DIV>
	<noscript>
	<style type="text/css">
		#menu div{
			display:block !important;
		}
	</style>
	</noscript>
</body>
</html>

kservice · November 25, 2009

Ну так у Вас и так <DIV style="DISPLAY: none" id=Out1details class=outline>.
???

Если оставить <DIV style="DISPLAY: none" id=Out1details class=outline>, то без JS меню будет свернуто. style="DISPLAY: none" надо убирать, но в этом случае оно развернуто что с JS, что без JS

можна так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
	#menu div.outline a{
		padding:5px 30px;
		background:#eee;
		display:block;
		border-bottom:1px solid #ddd;
		color:#005050;
	}
	</style>
	<script type=text/javascript>
	function clickHandler(e)
	{
		var strelka, targetId, srcElement, targetElement;
		srcElement = e.srcElement ? e.srcElement : e.target;
		if (srcElement.className == "outline")
		{
			targetId = srcElement.id + "details";

			strelka = srcElement.id + "str";
			targetElement = document.getElementById(targetId);

			if (targetElement.style.display == "none")
			{
				targetElement.style.display = "";
				document.getElementById(strelka).src="ksmenu/expanded.gif";
			}
			else
			{
				targetElement.style.display = "none";
				document.getElementById(strelka).src="ksmenu/collapsed.gif";
			}
		}
	}
	</SCRIPT>
</head>
<body>
	<DIV id=menu class=menu_left>
		<B style="cursor: pointer" id=Out1 class=outline onclick=clickHandler(event)><IMG id=Out1str src="ksmenu/treug.gif" width=7 height=10>Меню 1</B>
		<DIV style="DISPLAY: none" id=Out1details class=outline>
			<A href="menu11.shtml">Строка 1</A>
			<A href="menu12.shtml">Строка 2</A>
			<A href="menu13.shtml">Строка 3</A>
			<A href="menu14.shtml">Строка 4</A>
			<A href="menu15.shtml">Строка 5</A>
		</DIV>
	</DIV>
	<noscript>
	<style type="text/css">
		#menu div{
			display:block !important;
		}
	</style>
	</noscript>
</body>
</html>

Молодец mishka2! Вроде все сработало. А скромничал. Можно еще избавиться от <style type="text/css">

</style>, ведь все это есть в CSS. Проверено, работает. Еще раз всем большое спасибо. Теперь я знаю, где мне могут помочь!

Edited November 25, 2009 by kservice

mishka · November 25, 2009

На самом деле это все подсказал Justnewone, просто ты его непонял.

Мне до этого еще не приходилось пользоватся noscript.

Edited November 25, 2009 by mishka2

kservice · November 25, 2009

На самом деле это все подсказал Justnewone, просто ты его непонял.
Мне до этого еще не приходилось пользоватся noscript.

Тогда и Justnewone молодчина!

Sign In

Меню, раскрывающееся при отключении JS

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information