Web application’s menus
When developing a web application, one of the things I am almost always dissatisfied with is menus. Thinking back to my first web app, I now realise how much I pondered and rethought about the user interface and about the way all the single functions are logically made available to the user. That is usually done through an intelligent menu.
In time I changed radically my way of designing a - really - good set of menus. Just for discussion sake, I remember that at the beginning I liked to put all the menu voices directly available: no submenus, no grouping, no nothing. Everything was important! And normally my customers and the final users thought the same: every time they needed a new function, a new button was magically created by me for the purpose. As you may imagine, I ended up with a user interface full of buttons (those colourful and animated buttons we were used to love...) and virtually no space for the called function itself.
From that point in time till today, a lot has changed, and - I must admit - I probably see things exactly the opposite way. My last web application's menu has only 4 buttons as a start. Then it has submenus and sub-submenus, just in order to reach all the available functions.
Nowadays I do prefer small and minimalist user interfaces. I like to use simple icons as main menu without strange effects - plain and simple. The submenus might be a simple table with css applied to it, just to give the hover effect. I usually use pure asp to show or hide a submenu, but you could use jQuery if you like - as long as you keep it simple. In one of my older post about jQuery, I wrote about a plug-in called jQuery Corner: that's what I used to give a special - but simple - effect to my submenus. But that is all I really felt necessary, no other magic trick.
Just to give an idea of what I am talking about here is an image of the main menu:
This is the sub menu container:
And the sub menu container hover effect.
Isn’t that simple?
Just to give a little help or hint on the css needed, here is the code:
In time I changed radically my way of designing a - really - good set of menus. Just for discussion sake, I remember that at the beginning I liked to put all the menu voices directly available: no submenus, no grouping, no nothing. Everything was important! And normally my customers and the final users thought the same: every time they needed a new function, a new button was magically created by me for the purpose. As you may imagine, I ended up with a user interface full of buttons (those colourful and animated buttons we were used to love...) and virtually no space for the called function itself.
From that point in time till today, a lot has changed, and - I must admit - I probably see things exactly the opposite way. My last web application's menu has only 4 buttons as a start. Then it has submenus and sub-submenus, just in order to reach all the available functions.
Nowadays I do prefer small and minimalist user interfaces. I like to use simple icons as main menu without strange effects - plain and simple. The submenus might be a simple table with css applied to it, just to give the hover effect. I usually use pure asp to show or hide a submenu, but you could use jQuery if you like - as long as you keep it simple. In one of my older post about jQuery, I wrote about a plug-in called jQuery Corner: that's what I used to give a special - but simple - effect to my submenus. But that is all I really felt necessary, no other magic trick.
Just to give an idea of what I am talking about here is an image of the main menu:
 |
| Main Menu |
This is the sub menu container:
 |
| Sub Menu |
And the sub menu container hover effect.
 |
| Sub Menu Hover Effect |
Isn’t that simple?
Just to give a little help or hint on the css needed, here is the code:
.round_mem {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
outline: transparent;
cursor: pointer;
cursor: hand;
background-image: none;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#2B78ED), to(#FFFFFF));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #2B78ED, #FFFFFF);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B78ED, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2B78ED, endColorstr=#FFFFFFFF)";
}
.round_mem:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
text-align: center;
color: #000000;
outline: transparent;
cursor:pointer;
cursor: hand;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#2B78ED));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #FFFFFF, #2B78ED);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#2B78ED);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#2B78ED)";
}