Home arrow Design Usability arrow Page 4 - 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 - Alternative Design Idea with CSS
(Page 4 of 4 )

Combining list item style layouts with a customized style sheet can improve the crisp look of the menu. Here is an example of a movie hosting site like YouTube employing a menu of this style. CSS is great; it's such a quick process to implement it into any web site. CSS menus also allow for sustained consistency throughout the pages.

<html>
<head>
<link rel="stylesheet"type="text/css" href="submenu.css">
</head>
<ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About Site</li>
  <li><a href="#">Upload Movie</li>
  <li><a href="#">Watch Movies</a> 
    <ul>
      <li><a href="#">Action</a></li> 
      <li><a href="#">Sci-Fi</a></li>
      <li><a href="#">Virals</a></li> 
      <li><a href="#">Mysterious</a></li> 
      <li><a href="#">Hilarious</a></li> 
    </ul>
  </li>
  <li><a href="#">Tutorials</a> 
    <ul>
      <li><a href="#">Video Compression</a></li> 
      <li><a href="#">Shooting for the Web</a></li>
      <li><a href="#">Popular Famous Shorts</a></li>
      <li><a href="#">Why Host Movies?</a></li> 
      <li><a href="#">Learn to Edit Video</a></li> 
    </ul>
  </li>
  <li><a href="#">Competitions</a> 
    <ul>
      <li><a href="#">Best 3 minute Short Movie</a></li> 
      <li><a href="#">Best Screenplay - Win a WII</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>
</html>

As you can see, this is perfectly editable with the menu options required for the type of site being designed. At this point, the design is bland and needs spicing up with some style sheet tags. The style sheet has already been linked in between the <HEAD> tags called submenu.css. The menu just looks like a list at the moment and needs some design prowess to make the links look like buttons for the menu layout.

Here is an example style sheet. Feel free to edit it. The positioning is dealt with first by setting the margin to zero. The width of the menu item boxes is set to accommodate the text chosen for the menu items. Of course, feel free to vary that as desired. The sub-menus defined by the <UL> unordered lists need to be positioned next to the main menu items. So, the line position: relative is added to the <UL><LI> lines styling the text for the sub-menus.

The links in the sub-menus need to be highlighted but they always look better when not underlined when the mouse hovers over the link. So the line text-decoration:none is added. Display: block ensures that the links in the menu use the entire box space for the link. A padding: 5px gives just the amount of spacing required between the menu items. Then lastly, those sub-menu items need to show when the mouse hovers over the main menu items. So, the line li:hover ul {display: block;} is added. Adjust the left: 145px; value in the LI UL { } braces if the menu needs to be further away or closer to the main menu boxes.

ul {
        margin:0; 
        width:180px;
        list-style:none;
        
}

ul li {
        position:relative;
}

li ul {
        top:0; 
        position:absolute;
        left:145px;
        display:none;
}

ul li a {
        border:1px solid;
        padding:5px;
        display:block;
        text-decoration:none;
        color:blue;
        background:white; 
}

li:hover ul { display: block; }

Like anything, coding in JavaScript and CSS can be grasped quite quickly if some effort is invested into the learning process. Menus are probably the most important part of a site as they are the navigational tools for the site pages. As long as some creativity and thought is employed, coding these types of menus will continue to satisfy even the most ardent of coders.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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