<! DOCTYPEhtml>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Css3 +jQuery navigation menu</title>
    <style>
    body{margin: 0;padding: 0; }.m-menu{margin: 0;padding: 10px; width: 100%; height: 100px; }.m-menu-item{display: inline-block; position: relative; margin: 0 -5px 0 0; width: 200px;height: 100px;background-color: #dddddd;list-style-type: none; }.m-menu-item:hover{background-color: # 999999; }.m-menu-item-text{display: inline-block; width: 100%; line-height: 100px;text-align: center;cursor: pointer; }.m-menu-empty{height: 50px;background-color: transparent; }.m-menu-item-detail{opacity: 0; position: absolute; top: 120px;width: 200px;height: 200px;background-color: rgba(102.102.102.0.5);box-shadow: 0 0 10px #3366cc;transform: scale(0.0);z-index: 999; }.m-menu-item-detail-inner{padding: 5px; }.m-menu-item-detail-show {
        animation:detail 0.5 s linear;
        animation-fill-mode: forwards;
    }
    @keyframes detail
    {
        0%   {transform: scale(0.5.0.5);opacity: 0.5; }50%  {transform: scale(0.9.0.9);opacity: 0.9; }100% {transform: scale(1.1);opacity: 1;}
    }                
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
 
<body>
    <ul class="m-menu" id="m-menu">
        <li class="m-menu-item js-menu-item">
            <span class="m-menu-item-text">1 the menu</span>
            <div class="m-menu-empty"></div>
            <div class="m-menu-item-detail js-detail">
                <div class="m-menu-item-detail-inner">Details for Menu 1</div>
            </div>
        </li>
        <li class="m-menu-item js-menu-item">
            <span class="m-menu-item-text">The menu 2</span>
            <div class="m-menu-empty"></div>
            <div class="m-menu-item-detail js-detail">
                <div class="m-menu-item-detail-inner">Details for Menu 2</div>
            </div>  
        </li>
    </ul>
    <script>
    $(function () {
        var myAction = {};
        var dom = {
            menu: $('#m-menu'),
            menuItem: $('.js-menu-item'),
            detail: $('.js-detail')}; $.extend(myAction, {openMenu: function (that) {
                var detail = that.find('.js-detail');
                if(! detail.hasClass('m-menu-item-detail-show')) {
                    detail.addClass('m-menu-item-detail-show'); }},closeMenu: function () {
                //$('.js-detail').hide();
                $('.js-detail').removeClass('m-menu-item-detail-show');
            },
            initEvent: function () {
                dom.menu.on('mouseenter'.'.js-menu-item'.function () {
                    var that = $(this);
                    myAction.openMenu(that);
                });
                dom.menu.on('mouseleave'.'.js-menu-item'.function () {
                    var that = $(this); myAction.closeMenu(that); }); }});var init = function () { myAction.initEvent(); } (); })</script>
</body>
 
</html>
Copy the code