×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

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

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

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

(OP)
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

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

(OP)
Thanks, spamjim,

I'll check these out!

Thanks again.

mfho1

Thanks in advance for your help.
mfho1

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

what exactly are your trying to do for your menu?

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

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

(OP)
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

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

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.

CODE --> CSS

#nav2{
height:30px;
width:350px;
border:1px solid #AAAAAA;
background-color:#777777;
position:absolute;
}

#nav2 div{
float:left;
background-color:#777777;
height:28px;
overflow:hidden;
width:116px;
}

#nav2 div:hover{
background-color:#000000;
color:#FFFFFF;
height:auto;
}

#nav2 p{
clear:both;
}

#nav2 div h3{
margin:0;
padding:0;
text-align:center;
}

#nav2 div.dropdown li:hover{
background-color:#FFFFFF;
color:#000000;
}

#nav2 div.dropdown ul{
list-style-type: none;
list-style-position: inside;
padding: 0px;
}

#nav2 div.dropdown ul li{
text-align: center;
} 

CODE --> HTML

<div id="nav2">
<div class="dropdown">
<h3>File</h3>
<ul>
<li>Option 1</li>

<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>

</div>
<div class="dropdown">
<h3>Edit</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>

<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>

<div class="dropdown">

<h3>View</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>

<li>Option 4</li>
</ul>
</div>
<p> </p>
</div> 

----------------------------------
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 &amp; Tech

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

(OP)
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

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

(OP)
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

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

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 &amp; Tech

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

Quote:

writing some code to detect if the browser if JS-enabled or not,...
Hardly anybody surfs with Javascript switched off these days

Quote:

... 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 &amp; Tragedian
Extra Connections Ltd

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

(OP)
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

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

Quote:

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.

CODE

<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> 

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

Quote:


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:

CODE

<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 &amp; Tragedian
Extra Connections Ltd

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

(OP)
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close