Make navigation menu functional to people without Javascript

**Jeffie** · 10-24-2008, 01:59 PM

This may seem an odd question for a forum about Javascript but I would like to make my page accessible to those without javascript enabled.

I have two javascript elements on my page. - one of which is the navigation bar. Obviously this renders my site unusable for those with Javascript disabled (about 5% of my users according to google analytics). Also am I right in saying that relying totally on Javascript has a negative impact on your google rankings?

Can I do anything to make my nav bar accessible with javascript disabled?

My site is www.jeffcooperdesign.co.uk/devonsailingtemp

**jscheuer1** · 10-24-2008, 05:02 PM

That's really not such an odd request, menus at least should be accessible for non-javascript enabled browsers, which include screen readers for the blind and others challenged either physically or via the equipment available to them for browsing the internet, may require non-javascript enabled navigation of your site.

About Google, it probably cannot tell the site is inaccessible to non-javascript enabled browsers. If it can, I'm not sure if it would affect your ranking or not.

To make the menu non-javascript accessible, remove:

Code:

div.sdmenu div.collapsed {
	height: 25px;
}

from your sdmenu.css file. This will mess up the menu for javascript enabled folks though, so add the style back via javascript (in the head of your page, or just add its highlighted code to the very top of the sdmenu.js file):

Code:

<script type="text/javascript">
if (document.getElementById)
document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>');
</script>

In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

**Jeffie** · 10-24-2008, 07:24 PM

Thanks for the reply.

The first part of your suggestion has worked - the menu opens in an expanded state when javascript is disabled. Unfortunately the second part of your suggestion has not had the desired effect.

I have copied the following code into the top of the javascript file

(if document.getElementById)
document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>')

The full js file can be found at http://www.jeffcooperdesign.co.uk/de...ipts/sdmenu.js

As you can see if you go to www.jeffcooperdesign.co.uk/devonsailingtemp the page opens with the menu expanded when javascript is enabled.

Do you have a further suggestions? Thanks

**jscheuer1** · 10-24-2008, 07:48 PM

The page is not using that script:

Code:

http://www.jeffcooperdesign.co.uk/devonsailingtemp/scripts/sdmenu.js

It's using this unaltered one:

Code:

http://www.jeffcooperdesign.co.uk/devonsailingtemp/Scripts/sdmenu.js

Upper and lower case matter on the web. However, since you seem to be confused about that, if you can't work it out, just put the full added code in the head of your page:

Code:

<script type="text/javascript">
if (document.getElementById)
document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>');
</script>

**Jeffie** · 10-24-2008, 08:11 PM

Hi John

I do understand that upper and lowercase matter. Forgive my mistake. However, the code doesn't do what it needs to do even when placed into the correct file. It also doesn't work when I put it into the head of my page.

Thanks

**Moshambi** · 10-24-2008, 08:26 PM

not sure if this would be the problem but I'm also curious to know about this. Does it matter that this \ is in the line:

Code:

document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>');

I would not think that needs to be there...but then again I could be wrong..

**Jeffie** · 10-24-2008, 08:33 PM

I thought that looked odd as well so I tried it with and without the \

Neither variation works

**jscheuer1** · 10-25-2008, 02:53 AM

Well, all I said to this point was correct as far as I can tell, except for one typo. It should be:

Code:

<script type="text/javascript">
if (document.getElementById)
document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>');
</script>

Not:

Code:

<script type="text/javascript">
(if document.getElementById)
document.write('<style type="text/css">div.sdmenu div.collapsed {height: 25px;}<\/style>');
</script>

Sorry about that. Just for your information, the escape (\) in:

Code:

<\/style>

is not an issue, and is mostly only required for validation purposes if the code is on the page, but is also prudent when used externally so as to avoid any chance of confusing the script interpreter of any given browser. When a script interpreter encounters </, it is allowed to think that is the end of the script. Most are more cautious than that though.

I will be correcting the typo in my previous posts in this thread. However, I did make the error. I am sorry.

**Jeffie** · 10-25-2008, 08:20 AM

Brilliant, that's done the trick. Thanks for your help (and patience!)

**Moshambi** · 10-25-2008, 03:07 PM

Originally Posted by jscheuer1

Well, all I said to this point was correct as far as
Sorry about that. Just for your information, the escape (\) in:

Code:

<\/style>

is not an issue, and is mostly only required for validation purposes if the code is on the page, but is also prudent when used externally so as to avoid any chance of confusing the script interpreter of any given browser. When a script interpreter encounters </, it is allowed to think that is the end of the script. Most are more cautious than that though.

I will be correcting the typo in my previous posts in this thread. However, I did make the error. I am sorry.

I thought it might have been used as an escape but I was just curious because it was not done for the first one in "text/css"

But thank you for explaining what it means. I learned something new today