megamenuのjQuery要件を微調整します

jqueryを使用して4レベルのメガメニューを作成しました。それは私の要求に応じて80％働くことがあります。私はjqueryに100％満足していません jqueryをさらに洗練することができますか？私が逃した抜け穴はありますか？誰かが正しい方向に私を指すことができた場合、または私が間違っていたことを、本当に感謝します（CSS/HTMLを自由に変更できます）。megamenuのjQuery要件を微調整します

ノートは： - サブメニュー機能を使用すると、メニューのためのjQueryを使用しているのはなぜ下位レベルのウィンドウが開いたら、それは、HTML/CSS/jQueryのhttps://jsfiddle.net/mg02rxra/4/

<script> 

    $(function(){ 
     var _timer; 
     $('#menu > li > a').on("mouseenter",function(){ 
       mainLoad(this); //, 1000);     
     }); 
     $('#menu').on("mouseleave", function(){ 
       _timer = setTimeout(
       showDefault , 100); 
       }).on("mouseenter", function(){ 
       clearTimeout(_timer); 
     }); 

     function mainLoad(param){ 
        var li_ = param; 
        var x = $(param).parent(); 
        var ul_ = x.find(".sublevel1"); 
        $('#menu > li > a').removeClass('active'); 
        $(param).addClass('active');   
        $('.sublevel1').css('display','none'); 
        $(ul_).css('display','block');  
     }     

     function showDefault() {    
      $('.sublevel1').css('display','none'); 
      $('#menu > li > a').removeClass('active'); 
     } 

     $('.sublevel1 > div > li > a').on("mouseenter",function(){ 
       var li_ = this; 
       var x = $(this).parent().index() + 1;     
       $('.level1-a').removeClass('active'); 
       $('.level1:nth-child(' + x + ') .level1-a').addClass('active'); 
       $('.default, .info').css('display','none'); 
       $('.level1:nth-child(' + x +') .info').css('display','block');   
     }); 
     $(".xman").on("mouseleave", function(){ 
      _timer = setTimeout(
       showDefault2 , 100); 
      }).on("mouseenter", function(){ 
       clearTimeout(_timer); 
     }); 

     function showDefault2() {    
      $('.level1-a').removeClass('active'); 
      $('.info').css('display','none') 
      $('.default').css('display','block'); 
     } 

    }); 
</script>

出典

2016-03-21 Lakmal

のデフォルトのURL

を表示しますか？ Jqueryは常に遅れています。マウスオーバーしたら、コードを実行するためです。しかし、あなたは効率的な方法でCSSを使用してこれを行うことができます。この機能を取得するために、このリンクを使用してください：http://cssmenumaker.com/menu/opera-drop-down-menu

はまた、私は

'製品' の

index.htmlを

<!doctype html> 
<html lang=''> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="script.js"></script> 
    <title>CSS MenuMaker</title> 
</head> 
<body> 

<div id='cssmenu'> 
<ul> 
    <li><a href='#'><span>Home</span></a></li> 
    <li class='active has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Product</span></a></li> 
       <li class='last'><a href='#'><span>Sub Product</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Product</span></a></li> 
       <li class='last'><a href='#'><span>Sub Product</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

</body> 
<html>

Styles.cssを

#cssmenu ul, 
#cssmenu li, 
#cssmenu span, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#cssmenu { 
    line-height: 1; 
    border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    background: #141414; 
    background: -moz-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -o-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #333333 0%, #141414 100%); 
    background: linear-gradient(to bottom, #333333 0%, #141414 100%); 
    border-bottom: 2px solid #0fa1e0; 
    width: auto; 
} 
#cssmenu:after, 
#cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#cssmenu a { 
    background: #141414; 
    background: -moz-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -o-linear-gradient(top, #333333 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #333333 0%, #141414 100%); 
    background: linear-gradient(to bottom, #333333 0%, #141414 100%); 
    color: #ffffff; 
    display: block; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    padding: 19px 20px; 
    text-decoration: none; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu > ul > li { 
    display: inline-block; 
    float: left; 
    margin: 0; 
} 
#cssmenu.align-center { 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    float: none; 
} 
#cssmenu.align-center ul ul { 
    text-align: left; 
} 
#cssmenu.align-right > ul { 
    float: right; 
} 
#cssmenu.align-right ul ul { 
    text-align: right; 
} 
#cssmenu > ul > li > a { 
    color: #ffffff; 
    font-size: 12px; 
} 
#cssmenu > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #0fa1e0; 
    margin-left: -10px; 
} 
#cssmenu > ul > li:first-child > a { 
    border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
} 
#cssmenu.align-right > ul > li:first-child > a, 
#cssmenu.align-center > ul > li:first-child > a { 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 
#cssmenu.align-right > ul > li:last-child > a { 
    border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
    -webkit-border-radius: 0 5px 0 0; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a { 
    color: #ffffff; 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
    background: #070707; 
    background: -moz-linear-gradient(top, #262626 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #262626 0%, #070707 100%); 
    background: -o-linear-gradient(top, #262626 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #262626 0%, #070707 100%); 
    background: linear-gradient(to bottom, #262626 0%, #070707 100%); 
} 
#cssmenu .has-sub { 
    z-index: 1; 
} 
#cssmenu .has-sub:hover > ul { 
    display: block; 
} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: 0; 
} 
#cssmenu.align-right .has-sub ul { 
    left: auto; 
    right: 0; 
} 
#cssmenu .has-sub ul li { 
    *margin-bottom: -1px; 
} 
#cssmenu .has-sub ul li a { 
    background: #0fa1e0; 
    border-bottom: 1px dotted #31b7f1; 
    font-size: 11px; 
    filter: none; 
    display: block; 
    line-height: 120%; 
    padding: 10px; 
    color: #ffffff; 
} 
#cssmenu .has-sub ul li:hover a { 
    background: #0c7fb0; 
} 
#cssmenu ul ul li:hover > a { 
    color: #ffffff; 
} 
#cssmenu .has-sub .has-sub:hover > ul { 
    display: block; 
} 
#cssmenu .has-sub .has-sub ul { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 
#cssmenu.align-right .has-sub .has-sub ul, 
#cssmenu.align-right ul ul ul { 
    left: auto; 
    right: 100%; 
} 
#cssmenu .has-sub .has-sub ul li a { 
    background: #0c7fb0; 
    border-bottom: 1px dotted #31b7f1; 
} 
#cssmenu .has-sub .has-sub ul li a:hover { 
    background: #0a6d98; 
} 
#cssmenu ul ul li.last > a, 
#cssmenu ul ul li:last-child > a, 
#cssmenu ul ul ul li.last > a, 
#cssmenu ul ul ul li:last-child > a, 
#cssmenu .has-sub ul li:last-child > a, 
#cssmenu .has-sub ul li.last > a { 
    border-bottom: 0; 
}

出典

2016-03-21 08:39:22

サブメニューのを、次のようなコードを添付しています表示は左側、製品に関連する画像やURLは同じパネルの右側に表示する必要があります。ユーザーがサブメニュー（製品1、製品2）のどれかをホバーするとshおかあさんの子メニュー（副産物） – Lakmal

私はすべての位置がCSSによって設定できると思います。あなたはいくつかのCSSの専門家に連絡する必要があります。 –

megamenuのjQuery要件を微調整します

答えて

関連する問題