SodhanaLibrary

I am impressed with amazon menu style. In this article, I will explain how to build Amazon style menu. Observe the below diagram

Click Here to see DEMO

Concept :

1. This menu has 2 menu panels ( Main Menu Panel, Sub Menu Panel )
2. Every Main menu category item has sub menu panel
3. 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 &amp; Cloud Player
            <ul class="sub-menu" style="display: none;">
                <li class="cat_head">MP3s &amp; 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;
}