Home arrow Design Usability arrow Page 2 - Create Great JavaScript and CSS Menus Simply
DESIGN USABILITY

Create Great JavaScript and CSS Menus Simply


You have many options when it comes to displaying your web site's menu on its pages. This article will show you some of the more appealing of these options. We will consider ease of maintenance, aesthetics and user-friendliness.

Author Info:
By: Stephen Davies
Rating: 3 stars3 stars3 stars3 stars3 stars / 13
September 18, 2007
TABLE OF CONTENTS:
  1. · Create Great JavaScript and CSS Menus Simply
  2. · A Combo Box
  3. · Rollover Menu Example
  4. · Alternative Design Idea with CSS

print this article
SEARCH DEVARTICLES

Create Great JavaScript and CSS Menus Simply - A Combo Box
(Page 2 of 4 )

First I'll show you a quick combo box with options that open different web sites. This is one of the simplest applications using the JavaScript hierarchy to point to the items in a combo box. When JavaScript menus first started to appear, combo boxes were the earliest choices. They are quite nifty little ideas and can really aid the layout of the page. They do not occupy a particularly large portion of the page. Also, a JavaScript menu allows for several combo boxes to be placed into something like a table row quite easily or separated using DIV tags. The uses for this pretty standard method of creating a JavaScript menu are endless, really, and still popular.

<script type="text/javascript">
<!--

function jsMenu(combobox){
 
var URL=document.combobox.selection.options
[document.combobox.selection.selectedIndex].value;
 
window.location.href=URL;
}

//-->
</script>

Usage of hierarchy to point to data is shown here. A variable called URL will store the web page address being selected in the combo box. The document object points to the form name of combobox. Inside the form, there is the combo box itself containing the various drop-down options. The combo box needed to be named so that the hierarchy works; it is called selection. So we have:

document.combobox.selection.options[....]

Next, the combo box items need to be selected. The combo box named selection points to the option highlighted by the user through options. Then selectedindex is the selected option in the combo box. So:

document.combobox.selection.options
[document.combobox.selection.selectedIndex].value

Now the script just needs to be applied to the form where the combo box has been inserted.

<form name="combobox1">
 
<select name="selection" size="1" style="background-
color:#663399;font-family:Arial;font-size:12;color:#FFFF00;">
   
<option value="page4.html">Open Page 4
   
<option value="page3.html">Open Page 3
    
<option value="page2.html">Open Page 2
   
<option value="page1.html">Open Page 1
 
</select>
 
<input type="button" value="Visit Site"
onClick="javascript:jsMenu(this)"style=" background-
color:#663399;color:#FFFF00;font-family:Arial;font-size:12;">
</form>

So, a little combo box refresher. The options in the combo box can be edited very easily so go ahead. They show as single page names -- page1, page2, etc. It is very likely to be this way on a web site though URLs can also be inserted into those lines instead to open other web sites. An inline style has been used here twice. The first is used in the select tag line to style the combo box colors and fonts. The second is in the form button line to add a unique style to the button. This is what is great about inline styles as they can edit small parts of a site and override any styles attached to the site. What is achieved here is a quick and easily edited combo box.

Menu systems work well like this on many sites. Take a look at most travel booking sites; there are usually many combo boxes for destinations, departure times and airlines. The list of uses goes on, and they are great ways to add a variety of options for interactivity to any web site.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials