Best Practices for Creating Menus - How to Retain Your CSS Menu Structure even with Javascript

[Mfho1]

Hi,

I'm in the process of redesigning my website. I have a question about the best practices and best method for creating menus.

At first, I was thinking about just using Dreamweaver's Spry Assets to create the menus and use the familiar <ul><li>...</li></ul> combination for all of my menu entries.

The only problem with this is that it is heavily Javascript dependent. So if user's have Javascript disabled, then they'll see nothing but lists. I don't really favor this since it would make my site look hokey.

I've been on several sites where they have menus designed with CSS and the links are text, not images. One of the most popular with Adobe.com. When I turn off Javascript, they're menus are still styled beautifully. The only thing that may not work is the slider box.

I'm really torn right now between just using the lists, and then writing some code to detect if the browser if JS-enabled or not, and if not, give the user a message to turn JS on, but I'd prefer the option of what Adobe's doing and other sites.

My main question here is what are they doing to retain their CSS in the absence of JS?

Are there any start-off tutorial links you can provide so I can get up to speed on this?

I was enthusiastic about the Spry menus at first, but the JS thing shot that down.

Thanks for any opinions you can share.

mfho1

Thanks in advance for your help.
mfho1

 

[spamjim]

Lots of resources...

https://www.google.com/search?q=css+menu+site:alistapart.com

https://www.google.com/search?q=css3+menus

Very few menu functions really need JS. If you need animation/delays, use CSS3. Those without CSS3-capable browser will not see the animation/delays but the menu should work otherwise.

 

[Mfho1]

Thanks, spamjim,

I'll check these out!

Thanks again.

mfho1

Thanks in advance for your help.
mfho1

 

[darryncooke]

what exactly are your trying to do for your menu?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[Mfho1]

Basically, just have a menu that's similar to Adobe.com's. Where you have your menu items which contain sub-items, and then have the menu have a simple, nice design, like a gradient.

I thought I could accomplish this using Dreamweaver and Horizontal Spry Menus, but the look is dependent on JS. In Adobe, the menu stays the same regardless of whether JS is enabled or not.

Thanks.


Thanks in advance for your help.
mfho1

 

[vacunita]

There should be absolutely no need for JS in menus unless you want some complex animations.

Everything else, including the dropdowns, the backgrounds, the images etc.. can be handled using plain CSS so will work even without JS.

At its simplest this should give you an idea of how it can be done. Of course there's other approaches, but I find this one to be easily maintainable, and modifiable.

[COLOR=#993399]#nav2[/color][COLOR=#FF0000]{[/color]
[COLOR=#0000FF]height:[/color][i][COLOR=#009900]30px[/color][/i];
[COLOR=#0000FF]width:[/color][i][COLOR=#009900]350px[/color][/i];
[COLOR=#0000FF]border:[/color][i][COLOR=#009900]1px[/color][/i] [i][COLOR=#009900]solid[/color][/i] [COLOR=#FF0000]#AAAAAA[/color];
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#777777[/color];
[COLOR=#0000FF]position:[/color][i][COLOR=#009900]absolute[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]float:[/color][i][COLOR=#009900]left[/color][/i];
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#777777[/color];
[COLOR=#0000FF]height:[/color][i][COLOR=#009900]28px[/color][/i];
[COLOR=#0000FF]overflow:[/color][i][COLOR=#009900]hidden[/color][/i];
[COLOR=#0000FF]width:[/color][i][COLOR=#009900]116px[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div[COLOR=#990000]:[/color]hover[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#000000[/color];
[COLOR=#0000FF]color:[/color][COLOR=#FF0000]#FFFFFF[/color];
[COLOR=#0000FF]height:[/color][i][COLOR=#009900]auto[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] p[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]clear:[/color][i][COLOR=#009900]both[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div h3[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]margin:[/color][i][COLOR=#009900]0[/color][/i];
[COLOR=#0000FF]padding:[/color][i][COLOR=#009900]0[/color][/i];
[COLOR=#0000FF]text-align:[/color][i][COLOR=#009900]center[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div[COLOR=#993399].dropdown[/color] li[COLOR=#990000]:[/color]hover[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]background-color:[/color][COLOR=#FF0000]#FFFFFF[/color];
[COLOR=#0000FF]color:[/color][COLOR=#FF0000]#000000[/color];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div[COLOR=#993399].dropdown[/color] ul[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]list-style-type:[/color] [i][COLOR=#009900]none[/color][/i];
[COLOR=#0000FF]list-style-position:[/color] [i][COLOR=#009900]inside[/color][/i];
[COLOR=#0000FF]padding:[/color] [i][COLOR=#009900]0px[/color][/i];
[COLOR=#FF0000]}[/color]

[COLOR=#993399]#nav2[/color] div[COLOR=#993399].dropdown[/color] ul li[COLOR=#FF0000]{[/color]
[COLOR=#0000FF]text-align:[/color] [i][COLOR=#009900]center[/color][/i];
[COLOR=#FF0000]}[/color]

[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"nav2"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"dropdown"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<h3>[/color][/b]File[b][COLOR=#0000FF]</h3>[/color][/b]
[b][COLOR=#0000FF]<ul>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 1[b][COLOR=#0000FF]</li>[/color][/b]

[b][COLOR=#0000FF]<li>[/color][/b]Option 2[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 3[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 4[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]</ul>[/color][/b]

[b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"dropdown"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<h3>[/color][/b]Edit[b][COLOR=#0000FF]</h3>[/color][/b]
[b][COLOR=#0000FF]<ul>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 1[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 2[b][COLOR=#0000FF]</li>[/color][/b]

[b][COLOR=#0000FF]<li>[/color][/b]Option 3[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 4[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]</ul>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]

[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"dropdown"[/color][b][COLOR=#0000FF]>[/color][/b]

[b][COLOR=#0000FF]<h3>[/color][/b]View[b][COLOR=#0000FF]</h3>[/color][/b]
[b][COLOR=#0000FF]<ul>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 1[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 2[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]<li>[/color][/b]Option 3[b][COLOR=#0000FF]</li>[/color][/b]

[b][COLOR=#0000FF]<li>[/color][/b]Option 4[b][COLOR=#0000FF]</li>[/color][/b]
[b][COLOR=#0000FF]</ul>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]<p>[/color][/b]&nbsp[b][COLOR=#0000FF]</p>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Mfho1]

Thanks, vacunita.

I'll check this out.

Thanks for the sample code.

It's just gets confusing, because I see all of these cool things like Accordion and Tabbed Panels I want to incorporate throughout my site, but low and behold disabled JS gets in the way.

I'll import this into one of my files.

Thanks again.
mfho1


Thanks in advance for your help.
mfho1

 

[Mfho1]

Thanks, vacunita.

That works great. I'll flesh it out some more and let you know how things are coming with design.

Thanks again.



Thanks in advance for your help.
mfho1

 

[vacunita]

Glad I could help. Post back if you have any questions about it.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHunt]

writing some code to detect if the browser if JS-enabled or not,...

Hardly anybody surfs with Javascript switched off these days

... and if not, give the user a message to turn JS on

But if they do, they're not going to switch it on just because you tell them to!

Fortunately, as has been pointed out, there's no need for JS in a menu.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mfho1]

Hi ChrisHunt,

You know, I was toying around with that idea. I've seen it on other sites as well. It behaves almost like a custom error page.

Because even though I can get by on the navigation menu, I was planning on having a tabbed panel interface containing information that users can switch between.

And that is dependent on JS. When JS is disabled, the tabbed panel interface just does not look right and you can't see any of the tab's data.

So I'll probably take your suggestion as well.

Thanks again.
mfho1



Thanks in advance for your help.
mfho1

 

[spamjim]

Hardly anybody surfs with Javascript switched off these days... But if they do, they're not going to switch it on just because you tell them to!

I and a few million other people (based on download statistics) use browser add-ons that block scripts until they are given permission. Most new web pages that I visit have JS disabled. If I see something that is not rendering properly, I click a button and allow JS. It is no trouble. These browser add-ons are much easier than digging into the browser's preferences and toggling JS. The important thing for a web designer is to alert the visitor to the necessary requirements if they are not met. The following will display a message if JS is disabled.

<div id="javascripttest"><h1>Please enable Javascript for the best experience on this site.</h1></div> 
<script type="text/javascript">document.getElementById("javascripttest").style.display="none"; </script>

 

[ChrisHunt]

Because even though I can get by on the navigation menu, I was planning on having a tabbed panel interface containing information that users can switch between.

And that is dependent on JS. When JS is disabled, the tabbed panel interface just does not look right and you can't see any of the tab's data.

The way I'd handle that is something like this:

<div id="tabs">
Tabs go in here, but initially set to display:none in stylesheet
</div>
<div id="tab 1">
Content of tab 1
</div>
<div id="tab 2">
Content of tab 2
</div>
<div id="tab 3">
Content of tab 3
</div>
<script>
Javascript in here to...
   make div#tabs visible,
   make div#tab2 & div#tab3 not visible
   maybe add some other CSS presentation properties if required
</script>

Thus, if the user has JS switched on, he sees tabs. If he doesn't, he sees all the content in one long document (assuming that isn't going to totally break your layout).

Another approach is to make each new "tab" actually load a new page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mfho1]

Hi Spamjim,

Thanks for the JS notifiier. I appreciate it.

Hi Chris Hunt,

Thanks for the code.

I'll check these out.

Regards,
Mfho1


Thanks in advance for your help.
mfho1