码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-menu-aim 电商菜单栏demo

时间:2019-07-05 12:47:45      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:remove   pad   jquery   href   console   head   type   rgba   ext   

最近要修改一个电商网站的菜单,引用了jQuery-menu-aim的插件,因此,去找了几个资料;

参考GitHub地址: https://github.com/kamens/jQuery-menu-aim

效果图:

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery-menu-aim example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
<style>
    .nav {
        position: relative;
        left: 0;
        display: block;
        float: left;
        margin: 0 10px 0 0;
    }
    .navbar-inverse .nav .active > a {
        color: #ffffff;
        background-color: #111111;
    }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        background-color: #ffffff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
    .open > .dropdown-menu {
        display: block;
    }
    .popover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1010;
        display: none;
        max-width: 276px;
        padding: 1px;
        text-align: left;
        white-space: normal;
        background-color: #ffffff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
    .popover-title {
        padding: 8px 14px;
        margin: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 18px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
    .popover {
        width: 400px;
        -webkit-border-top-left-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        overflow: hidden;
    }

  .popover-content {
        text-align: center;
        padding: 9px 14px;
    }
 .popover-content img {
        height: 212px;
        max-width: 250px;
    }

/* .nav > li > .dropdown-menu:before {
        position: absolute;
        top: -7px;
        left: 9px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-left: 7px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: ‘‘;
    }*/
    .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 20px;
        color: #333333;
        white-space: nowrap;
    }
.dropdown-menu > li > a:hover {
        background-image: none;
        color: white;
        background-color: rgb(0, 129, 194);
        background-color: rgba(0, 129, 194, 0.5);
    }

 .dropdown-menu > li > a.maintainHover {
        color: white;
        background-color: #0081C2;
    }

</style>
</head>

<body>

    <div >
      <div >
        <div >        
          <div>
            <ul class="nav">
              <li >
                <a class=" click-open"  href="#">Explore the Monkeys</a>

                <ul class="dropdown-menu">
                    <li data-submenu-id="submenu-patas">
                        <a href="#">Patas</a>
                        <div id="submenu-patas" class="popover">
                            <h3 class="popover-title">Patas</h3>
                            <div class="popover-content"><img src="img/patas.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-snub-nosed">
                        <a href="#">Golden Snub-Nosed</a>
                        <div id="submenu-snub-nosed" class="popover">
                           <!--  <h3 class="popover-title">Golden Snub-Nosed</h3>
                            <div class="popover-content"><img src="img/snub-nosed.png"></div> -->
                        </div>
                    </li>
                    <li data-submenu-id="submenu-duoc-langur">
                        <a href="#">Duoc Langur</a>
                        <div id="submenu-duoc-langur" class="popover">
                            <h3 class="popover-title">Duoc Langur</h3>
                            <div class="popover-content"><img src="img/duoc-langur.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-pygmy">
                        <a href="#">Baby Pygmy Marmoset</a>
                        <div id="submenu-pygmy" class="popover">
                            <h3 class="popover-title">Baby Pygmy Marmoset</h3>
                            <div class="popover-content"><img src="img/pygmy.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-tamarin">
                        <a href="#">Black Lion Tamarin</a>
                        <div id="submenu-tamarin" class="popover">
                            <!-- <h3 class="popover-title">Black Lion Tamarin</h3>
                            <div class="popover-content"><img src="img/tamarin.png"></div> -->
                        </div>
                    </li>
                    <li data-submenu-id="submenu-monk">
                        <a href="#">Monk Saki</a>
                        <div id="submenu-monk" class="popover">
                            <h3 class="popover-title">Monk Saki</h3>
                            <div class="popover-content"><img src="img/monk.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-gabon">
                        <a href="#">Gabon Talapoin</a>
                        <div id="submenu-gabon" class="popover">
                            <h3 class="popover-title">Gabon</h3>
                            <div class="popover-content"><img src="img/gabon.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-grivet">
                        <a href="#">Grivet</a>
                        <div id="submenu-grivet" class="popover">
                            <h3 class="popover-title">Grivet</h3>
                            <div class="popover-content"><img src="img/grivet.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-red-leaf">
                        <a href="#">Red Leaf</a>
                        <div id="submenu-red-leaf" class="popover">
                            <h3 class="popover-title">Red Leaf</h3>
                            <div class="popover-content"><img src="img/red-leaf.png"></div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-king-colobus">
                        <a href="#">King Colobus</a>
                        <div id="submenu-king-colobus" class="popover">
                            <h3 class="popover-title">King Colobus</h3>
                            <div class="popover-content"><img src="img/colobus.png"></div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../jquery.menu-aim.js" type="text/javascript"></script>
<script>
 $(function(){
    $(.click-open).hover(function(){
        $(.dropdown-menu).css(display,block)
    })
})
 var $menu = $(".dropdown-menu");
 $menu.menuAim({
    activate: activateSubmenu,
    deactivate: deactivateSubmenu
});
 function activateSubmenu(row) {
    var $row = $(row),
    submenuId = $row.data("submenuId"),
    $submenu = $("#" + submenuId),
    height = $menu.outerHeight(),
    width = $menu.outerWidth();
     console.log(submenuId)
     console.log($submenu)
    $submenu.css({
        display: "block",
        top: -1,
        left: width - 3, 
        height: height - 4  
    });

    $row.find("a").addClass("maintainHover");
}

function deactivateSubmenu(row) {
    var $row = $(row),
    submenuId = $row.data("submenuId"),
    $submenu = $("#" + submenuId);
    $submenu.css("display", "none");
    $row.find("a").removeClass("maintainHover");
}
$(".dropdown-menu li").click(function(e) {
    e.stopPropagation();
});

$(document).click(function() {
    $(".popover").css("display", "none");
    $("a.maintainHover").removeClass("maintainHover");
    $(.dropdown-menu).css(display,none)
});

</script>

</body>
</html>

 

jQuery-menu-aim 电商菜单栏demo

标签:remove   pad   jquery   href   console   head   type   rgba   ext   

原文地址:https://www.cnblogs.com/arealy/p/11137382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!