I am impressed with amazon menu style. In this article, I will explain how to build Amazon style menu. Observe the below diagram
Concept :
- This menu has 2 menu panels ( Main Menu Panel, Sub Menu Panel )
- Every Main menu category item has sub menu panel
- Whenever user mouse over on Main Menu Item, particular sub menu item will be displayed
Markup :
If any Menu Menu Item has Sub Menu Panel then it must have class "category". This class is display arrow symbol
<div class="amenu triangle-border top"> <ul class="main-menu"> <li class="category">Unlimited Instant Videos <ul class="sub-menu" style="display: none;"> <li class="cat_head">Unlimited Instant Videos</li> <li><a href="#">Amazon Instant Video</a></li> <li><a href="#">Prime Instant Video</a></li> <li><a href="#">Shop Instant Video</a></li> <li><a href="#">Your Watchlist</a></li> </ul> </li> <li class="category">MP3s & Cloud Player <ul class="sub-menu" style="display: none;"> <li class="cat_head">MP3s & Cloud Player</li> <li><a href="#">MP3 Stores</a></li> <li><a href="#">Best Sellers</a></li> </ul> </li> <li><a href="#">Full Store Directory</a></li> </ul> </div>
jQuery :
$(".amenu .category").mouseover(function(){ $(".sub-menu").hide(); $($(this).children(".sub-menu")).show(); }); $(".amenu .sub-menu").mouseout(function(){ $(this).hide(); });
CSS :
.triangle-border { position: relative; margin: 1em 0 3em; border: 1px solid #ccc; color: #333; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 5px 0px 0px 5px; width: 245px; } .triangle-border:before { content: ""; position: absolute; bottom: -20px; left: 40px; border-width: 20px 20px 0; border-style: solid; border-color: #ccc transparent; display: block; width: 0; } .triangle-border:after { content: ""; position: absolute; bottom: -13px; left: 47px; border-width: 13px 13px 0; border-style: solid; border-color: #fff transparent; display: block; width: 0; } .triangle-border.top:before { top: -12px; bottom: auto; left: 40px; border-width: 0 12px 12px; } .triangle-border.top:after { top: -10px; bottom: auto; left: 43px; border-width: 0 10px 10px; } .amenu { position: relative; } .amenu ul.sub-menu { position: absolute; left: 246px; top: -1px; border: 1px solid #ccc; border-radius: 0px 5px 5px 0px; list-style-type: none; margin: 0; zoom: 1; padding: 14px 0 8px; width: 240px; height: 300px; display: none; } .amenu ul.main-menu { list-style-type: none; margin: 0; zoom: 1; padding: 14px 0 8px; width: 240px; height: 300px; } .amenu li { display: block; font-family: "arial", "sans-serif"; font-size: 13px; line-height: 16px; color: #333; list-style-type: none; cursor: default; padding: 0 0 7px 0; margin: 0; white-space: nowrap; margin: 0 10px 0 14px; text-overflow: ellipsis; text-align: left; } .amenu li.category { background-image: url(data:image/gif;base64,R0lGODlhBwAKAMIEAObm5uvr6/Dw8P39/f///////////////yH5BAEKAAcALAAAAAAHAAoAAAMWSDPUGoE5AaIj1M4qMW+ZFDYD1ClnAgA7); background-position: right 3px; background-repeat: no-repeat; } .amenu li.cat_head { color: #e47911; font-size: 18px; overflow: visible; padding-bottom: 10px; white-space: normal; } .amenu li.category:hover { background-image: url(data:image/gif;base64,R0lGODlhBwAKAMIEAICAgJmZmbOzs/f39////////////////yH5BAEKAAcALAAAAAAHAAoAAAMWSDPUGoE5AaIj1M4qMW+ZFDYD1ClnAgA7); color: #e47911; text-decoration: none; font-weight: bold; } .amenu li a { text-decoration: none; color: #444; } .amenu li a:hover { text-decoration: underline; color: #e47911; } .amenu li { font-weight: normal; }
Nice one. Really helped me in the re-design of my nopcommerce mega menu structure.
ReplyDeleteThanks for your share!
ReplyDelete