fine-tune jQuery Anforderungen für Megamenu

Ich habe 4-Ebene Megamenu mit jquery erstellt. es funktioniert 80% gemäß meiner Anforderung, manchmal hinkt es zwischen Tabs. Ich bin nicht 100% zufrieden mit der Jquery Können wir die Jquery weiter verfeinern und gibt es irgendwelche Schlupflöcher, die ich verpasst habe? Wenn mir jemand in die richtige Richtung zeigen könnte, oder was ich falsch gemacht habe, würde ich es sehr zu schätzen wissen (frei, CSS/HTML zu ändern).fine-tune jQuery Anforderungen für Megamenu

Anmerkung: einmal sublevel Fenster öffnen zeigt Standard-URL

für 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>

Quelle

2016-03-21 Lakmal

Warum Sie jQuery verwenden für Menü - Untermenü Funktionalität? Jquery immer hinterher - weil es immer den Code ausführt, sobald Sie mit der Maus fertig sind. Aber Sie können dies tun, indem Sie CSS auf effiziente Weise verwenden. Bitte verwenden Sie diesen Link für immer diese Funktionalität: http://cssmenumaker.com/menu/opera-drop-down-menu

Auch ich bin Befestigung Code wie folgen

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

Quelle

2016-03-21 08:39:22

Untermenü von 'Produkten' Show's auf der linken Seite, während das Bild oder die Url, die mit Products in Verbindung stehen, auf der rechten Seite desselben Panels angezeigt werden müssen. Wenn der Benutzer eines der Untermenüs (Produkt 1, Produkt 2) berührt, muss es sh ow ist das Kindermenü (Unterprodukt) – Lakmal

Ich denke, dass alle Position von CSS eingestellt werden kann. Sie müssen sich mit einem CSS-Experten in Verbindung setzen. –

fine-tune jQuery Anforderungen für Megamenu

Antwort

Verwandte Themen