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

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;
}

4 comments:

  1. Nice one. Really helped me in the re-design of my nopcommerce mega menu structure.

    ReplyDelete
    Replies
    1. Great Article
      Cloud Computing Projects


      Networking Projects

      Final Year Projects for CSE


      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. You are very good at that.
    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete

Blogroll

Popular Posts