In current web trends users/clients looks mainly for readability, user friendliness, logical alignment of data. These are some of the important points which any developer needs to care of, while designing a system.  Simple menu discussed here actually holds all the three points together with a simple trick which any software developer can achieve.

For creating simple  neat and beautiful menu for our websites, usually we will struggle in web  to find better plugin for our  framework or javascript menu scripts  and even dhtml menu scripts which is little heavy for use. So in this article we have used only CSS & images for creating a simple and neat menu on mouse over of an image.

Here we take a shopping cart scenario by using UL-> LI for displaying the images for which we will add the menu on mouse over. Following is the code for displaying images,

<ul id="ulcssmenu">
<li>
<h3>Item 1</h3>
<div><a href="javascript:void(0)"></a></div>
<img src="images/image1.jpg" alt="" /></li>
</ul>

Here <h3> shows the title of the product, <div> with class shows the various menu options for the product, and the product image is shown by <img>. Now for alignment of this tags we use the following styles,

.ulcssmenu h3{
position:absolute;
top:0px;
padding:0 20px;
text-decoration:underline;
}
.ulcssmenu {
float: left;
height: 200px;
left: 0;
margin: 0 0 18px 18px;
padding: 0;
width: 97%;
list-style: none outside none;
}
.ulcssmenu li {
float: left;
height: 200px;
margin: 10px 20px;
position: relative;
text-align: center;
width: 200px;
background-color:#eee
}
.ulcssmenu li img {
-moz-border-radius:10px;
border:2px solid #eee;
padding:2px;
cursor: pointer;
height: 200px;
width: 200px;
}
.divcssmenu{
opacity:0;
padding-top:170px;
position:absolute;
height:30px;
width:200px;
top:0
}
.divcssmenu:hover{
opacity:1
}
.divcssmenu a.like {
background: url("images/like.png") no-repeat scroll center center transparent;
opacity: 0.5;
padding:10px 20px
}

HTML and CSS code looks small and simple, but the output one will see in browser is neat and fantastic. Check the demo and source code for details.
In demo, only an alert event window shows up when any menu option is selected, in actual scenario we can send a request to server (preferably XMLHTTPRequest, coz i love AJAX 🙂 ) for any updation or any logical functionality can be executed in client or server according to the requirement.

Scenarios like shopping cart (add to cart, remove from cart), user profile options (change image, edit profile, view profile) & even in website main menu (showing image near menu links) where we can use similar code.

Developer should be able to think of how & where to use this feature  appropriately which achieves a better website.

Also do share other innovative ideas and links here.

Hope this helps.

Be Sociable, Share!