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