if javascript is disabled...

**MonteChristo** · 03-08-2008, 03:02 AM

dfdfddfd

**jscheuer1** · 03-08-2008, 04:55 AM

You can do just about anything you like inside:

Code:

<noscript>
code for non-javascript enabled browsers here
</noscript>

tags. However, there is often a better way to deal with the situation. Instead of an image, normal links could be used to allow the user to at least navigate the site without javascript. In addition, many (even the basic ones) javascript drop down menus allow you to have the triggers be links when javascript is disabled. Skillful use of these could be all that it required to make your site accessible to non-javascript enabled browsers.

**MonteChristo** · 03-08-2008, 05:17 PM

dfdfdfdfdf

**jscheuer1** · 03-09-2008, 07:09 AM

Backup Image? Oh well. You could have backup navigation.

Making the javascript menu totally invisible to non-javascript browsers may not be the ideal solution, but it can be done by setting the visible portions of the menu to display:none; in your style section while having a small script to write out another style section that gives them their appropriate display properties only for javascript enabled browsers. The idea being that javascript is required to write out these styles, so only javascript enabled browsers will see them.

I still favor an approach that would allow the non-javascript enabled browser to see the menu, and just have it function differently for them.

To be more specific, I would need more specifics, preferably a link to your page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**uppercanuck** · 03-09-2008, 11:01 PM

There's an easier way: use a pure CSS drop down.

Try this (it works in FF, IE 6 & 7...haven't tested it in Safari or Opera yet):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<style type="text/css">

#menu-wrapper
{
	position: relative;
	float: left;
	width: 980px;
	height: 29px;
	margin: 0;
	padding:0;
	font: 1.0em normal arial,verdana,helvetica,serif;
	background: #333;

}


#menu
{
	list-style-type:none;
	margin:0;
	padding:0;
	font: 0.9em normal arial,verdana,helvetica,serif;

}

#menu li
{
	float:left;
	padding:0;
	margin:0;
	position:relative;
	width:150px;
	height:1px;
	z-index:100;
}


#menu li a, #menu li a:visited
{
	text-decoration:none;
}

#menu dl {
	position:absolute;
	top:0;
	left:0;
	width: 150px;
	margin: 0;
	padding: 0;
}


#menu dt
{
	background: #333;
	margin:0;
	font-size: 1.0em;
	border: 0;
	width:150px;
	float:left;
}


#menu dd
{
	display:none;
	background: transparent;
	border: 0;
	clear:left;
	margin:0;
	padding:0;
	color: #fff;
	font-size: 1em;
	text-align:left;
}


#menu dt a, #menu dt a:visited
{
	display:block;
	color:#fff;
	padding: 7px 7px 5px 20px;
	width:125px;
}


#menu dd a, #menu dd a:visited
{
	background:#333;
	color:#fff;
	text-decoration:none;
	display:block;
	padding:6px 7px 7px 20px;
	width:125px;
}


#menu li a:hover
{
	border:0;
}


#menu li:hover dd, #menu li a:hover dd
{
	display:block;
}


#menu li:hover dl, #menu li a:hover dl
{
	width:125px;
	border: 0;
}

#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover
{
	background: #666;
	color:#fff;
}

</style>

</head>

<body>

<div id="menu-wrapper">

<ul id="menu">

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="one">
	<dt><a href="#">List Item</a></dt>
	<dd><a href="#" title="#">Child 1</a></dd>
	<dd><a href="#" title="#">Child 2</a></dd>
	<dd><a href="#" title="#">Child 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="two">
	<dt><a href="#">List Item 2</a></dt>
	<dd><a href="#" title="#">Child 1</a></dd>
	<dd><a href="#" title="#">Child 2</a></dd>
	<dd><a href="#" title="#">Child 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="three">
	<dt><a href="#">List Item 3</a></dt>
	<dd><a href="#" title="#">Child 1</a></dd>
	<dd><a href="#" title="#">Child 2</a></dd>
	<dd><a href="#" title="#">Child 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="four">
	<dt><a href="#">List Item 4</a></dt>
	<dd><a href="#" title="#">Child 1</a></dd>
	<dd><a href="#" title="#">Child 2</a></dd>
	<dd><a href="#" title="#">Child 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

</body>
</html>

This was inspired by the work over at http://www.cssplay.co.uk.

Hope that helps.

UC.

Thread: if javascript is disabled...

Thread Tools

Search Thread

if javascript is disabled...

Bookmarks

Bookmarks

Posting Permissions