Картинка вместо меню при отключенном JS

px379 · April 30, 2012

Здравствуйте. У меня есть меню на JS, надо сделать так, что бы при отключенном в браузере JS это меню исчезало, а вместо него появлялась картинка или текст о просьбе включить JS.

Конечно можно бы было поставить картинку на задни план меню, но в моем случае, это меню даже не исчезает при отключении JS.

function toggle(elementid) {
				var el = document.getElementById(elementid);
				if (el) {
					if (el.style.display != 'none') {
						el.style.display = 'none';
					}
					else {
						el.style.display = '';
					}
				}
			}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language=JavaScript src="menu.js" type=text/javascript></script>
</head>

<body onLoad="javascript: toggle('secondlevel');">
<div id="maincontainer">
<div id="menu">

	<ul id="firstlevel">
		<li onmouseover="javascript: toggle('secondlevel');" onmouseout="javascript: toggle('secondlevel');" >
			<a href="#">Первый раздел</a>

		</li>

	<li onmouseover="javascript: toggle('secondlevel');" onmouseout="javascript: toggle('secondlevel');" >

	<a href="#">Второй раздел</a>
	<ul id="secondlevel">
<li>
<a href="#">Вложеный пункт меню 1</a>
</li>
<li>
<a href="#">Вложеный пункт меню 2</a>
</li>
<li>
<a href="#">Вложеный пункт меню 3</a>
</li>
	</ul>
</li>


<li>
<a href="#">Третий раздел</a>
</li>
	</ul>
</div>
</div>
</body>
</html>

Radiocity · April 30, 2012

Тэг noscript - позволяет реагировать на отключенный javascript. Это единственный способ.

В вашем случае можно и без js обойтись на чистом css.

Edited April 30, 2012 by Radiocity

SelenIT · April 30, 2012

Это единственный способ.

Есть еще такой подход.

px379 · May 1, 2012

Radiocity, SelenIT, Спасибо) Хоть меню в обоих случаях не исчезает,но это уже не проблема. Напишу менюшку чисто на JS с getElementById, тогда меню точно будет пропадать)

Radiocity, Да я б и сам рад это все сделать на CSS, но надо именно на JS =)

alexandr_v-vich · May 1, 2012

Это единственный способ.

Есть еще такой подход.

Напишу менюшку чисто на JS с getElementById

Не пойму, а в чём проблема с display: block/none?

Edited May 1, 2012 by alexandr_v-vich

px379 · May 2, 2012

alexandr_v-vich, Из моего вопроса вроде понятно что я не очень хорошо знаю JS=) только не пойму, причем тут display: block/none? Если я в display: поставлю block, то меню просто перестанет функционировать нужным образом.

alexandr_v-vich · May 2, 2012

px379,

Если я в display: поставлю block, то меню просто перестанет функционировать нужным образом.

У вас меню находится в div (id=menu), а он по дефолту имеет display: block;

Смотрите, пИшите вы меню и картинку. Сначала ставите меню display: none; и позиционируете картинку как она должна будет отображаться при отключённом js. Затем ставите меню display: block;, а картинке display: none; и позиционируете меню как оно должно будет отображаться при включённом js.

Теперь инлайн (наверное, можно и в отдельном css, но я не уверен, так что так) запишем стили для них.


<div id="menu" style="display: none;">…</div>
<img id="zamena" src="…" style="display: block;" />

Ну и теперь куда-нибудь вставляем js со стилями-наоборот

<script>
document.getElementById('menu').style.display = "block";
document.getElementById('zamena').style.display = "none";
</script>

Edited May 2, 2012 by alexandr_v-vich

Radiocity · May 3, 2012

Есть еще такой подход.

Если отключить js в браузере, приведенный подход не работает.

Edited May 3, 2012 by Radiocity

SelenIT · May 3, 2012

Работает. В этом и весь фокус: при отключенном JS применяются дефолтные стили попроще, а при включенном — те, которые нужны для правильного отображения всего добра, завязанного на JS-функциональность. Причем применяются сразу, без "моргания" страницы в момент смены (как бывает с jQ-обвесками, подцепляющимися по domready).

Sign In

Картинка вместо меню при отключенном JS

Question

px379

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Radiocity

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

px379

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

px379

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Radiocity

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information