Home arrow Design Usability arrow Page 3 - 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 - Rollover Menu Example
(Page 3 of 4 )

Now for the next part, I'll show you a more complex example but again, it can be followed and edited with ease. I shall explain the code again as it progresses. We'll create a rollover menu again with four links, and each rollover effect adds a different color to the menu item. This type of menu is quite popular and now a very commonplace menu system on the web. It has a very smooth design feel to it.

<html>
<script language="javascript">
<!--

  function mouseover(menu,page){
   
menu.style.background='#6633C0';
   
description.innerHTML=page;
 
}

  function mouseout(menu){
   
menu.style.background='#663390'
   
description.innerHTML='&nbsp;'
 
}

-->
</script>
<table cellpadding="2" cellspacing="0"width="100">
  <tr>
   
<td id="item1" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item1,'')"onMouseOut="mouseout(item1)"
onClick="location.href='page1.html'">
     
<div align="center">Page 1</div>
   
</td>
  </tr>
  <tr>
   
<td id="item2" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item2,'')"onMouseOut="mouseout(item2)"
onClick="location.href='page2.html'">
     
<div align="center">Page 2</div>
   
</td>
 
</tr>
  <tr>
   
<td id="item3" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item3,'')"onMouseOut="mouseout(item3)"
onClick="location.href='page3.html'">
     
<div align="center">Page 3</div>
   
</td>
 
</tr>
  <tr>
   
<td id="item4" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item4,'')"onMouseOut="mouseout(item4)"
onClick="location.href='page4.html'">
     
<div align="center">Page 4</div>
   
</td>
 
</tr>
  <tr>
   
<td id="item5" style="cursor:hand;background-color:#663399"
onMouseOver="mouseover(item5,'')"onMouseOut="mouseout(item5)"
onClick="location.href='page5.html'">
     
<div align="center"></div>
   
</td>
 
</tr>
 
<tr>
   
<td><font id="description"size="1"></font></td>
 
</tr>
</table>
</html>

Replace the location.href URLs with the links required. The left hand menu result can be increased to hold many more menu items. These menus are great for the standard vertical menus for most types of sites. More links can be added; it is quite straightforward to edit.


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