2017-03-23 4 views
0

Ich arbeite auf einer Website, um mehr über Javascript zu lernen, aber ich weiß nicht, wie das zu beheben. Wenn du dir die Fiddlle anschaust und das Navigationsgerät ausprobierst, weißt du, worüber ich rede (wenn nicht, versuche, den Multiplikator zu bewegen und zu versuchen, Quadrupel zu klicken). Auch die .slideUp() scheint Glitch und ich weiß nicht warum. Ich möchte, dass es so aussieht, als ob es vom Nav herunter gleitet und in das Nav zurückrutscht.Nav mit Dropdown-Menü ist sehr glitchy

Also, wie würdest du diese 2 Probleme beheben? https://jsfiddle.net/26L2h6zg/

// Drop down menu 
$(".shopDrop").hide(); 

$(".shop ul li").hover(function(){ 
    $(this).find(".shopDrop").slideDown(); 
}, function(){ 
    $(this).find(".shopDrop").slideUp(); 
}); 

// Drop down menu info 
$(".shopDrop a").hover(function(){ 
    $(this).next(".shopHoverInfo").fadeIn("slow"); 
}, function(){ 
    $(this).next(".shopHoverInfo").fadeOut("slow"); 
}); 
+0

Das Problem ist, dass wenn die 'fadeOut()' beendet ist, die Elemente auf der Seite nach oben bewegen. Das Entfernen von 'fadeOut()' behebt das Problem, lässt aber die Elemente offen. Wie wäre es, die Elemente beim Klick einfach zu erweitern und zu schließen, anstatt einen verblassten Hover zu verwenden? –

+0

Ich stimme mit @ObsidianAge überein die meisten modernen Layouts empfehlen nicht im Hover Nav Menü, da diese Art von Menü nicht gut mit mobilen/Tablet Geräten funktioniert. –

Antwort

1

// Drop down menu 
 
$(".shopDrop").hide(); 
 

 
$(".shop ul li").hover(function(){ 
 
    \t $(this).find(".shopDrop").stop(true).slideDown(); 
 
}, function(){ 
 
    \t $(this).find(".shopDrop").stop(true).slideUp(); 
 
}); 
 

 
// Drop down menu info 
 
$(".shopDrop a").hover(function(){ 
 
    //$(this).stop(true, true); 
 
    $(this).next().stop(true).fadeIn("slow"); 
 
}, function(){ 
 
    //$(this).stop(true); 
 
    $(this).next().stop(true).fadeOut("slow"); 
 
});
nav.shop { 
 
\t width: 100%; 
 
\t height: 100px; 
 
\t background: #182024; 
 
\t margin: 0; 
 
} 
 

 
nav.shop ul { 
 
\t width: 960px; 
 
\t list-style-type: none; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
nav.shop ul li { 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 25px; 
 
} 
 

 
nav.shop ul li h1 { 
 
\t font-size: 35px; 
 
\t margin-right: 20px; 
 

 
} 
 

 
nav.shop ul li h2 { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t font-size: 35px; 
 
\t margin-left: 10px; 
 
} 
 

 
nav.shop ul li a { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t font-size: 35px; 
 
\t padding-bottom: 10px; 
 
\t padding-top: 10px; 
 
\t display: block; 
 
} 
 

 
.shopDrop { 
 
\t position: absolute; 
 
\t background: #182024; 
 
\t padding: 30px 10px 0 10px; 
 
\t margin-top: -30px; 
 
\t border-bottom-right-radius: 10px; 
 
\t border-bottom-left-radius: 10px; 
 
} 
 

 
nav.shop ul li div a {font-size: 20px;} 
 
nav.shop ul li div span {font-size: 15px;} 
 

 
#shopMultiplier{border-bottom: 5px solid #CA2525;} 
 
#shopAutoclicker{border-bottom: 5px solid #2596CA;} 
 
#shopFarms{border-bottom: 5px solid #CAB125;} 
 
#shopSkills{border-bottom: 5px solid #35CA25;} 
 

 
.shopHoverInfo { 
 
\t display: none; 
 
\t width: 150px; 
 
\t background: #1C262A; 
 
\t text-align: center; 
 
\t padding: 0; 
 
\t color: #fff; 
 
} 
 

 
.shopHoverInfo h3 { 
 
\t font-size: 17px; 
 
\t background: #CA2525; 
 
\t margin: 0; 
 
\t padding: 5px; 
 
\t border-top-right-radius: 10px; 
 
\t border-top-left-radius: 10px; 
 
} 
 

 
.shopHoverInfo h4 { 
 
\t font-size: 17px; 
 
\t margin: 0; 
 
\t background: #EED634; 
 
} 
 

 
.shopHoverInfo p { 
 
\t font-size: 15px; 
 
}
<nav class="shop"> 
 
\t <ul> 
 
\t \t <li><h1>SHOP</h1></li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopMultiplier"><a href="#">Multiplier</a></h2> 
 
\t \t \t <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="doublePoints">Double knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Double Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopDoublePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 2x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="triplePoints">Triple knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Triple Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopTriplePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 3x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="quadruplePoints">Quadruple knowledge <span>&#x2606;</span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Quadruple Knowledge</h3> 
 
\t \t \t \t \t <h4>Price: <span id="shopQuadruplePrice"></span> knowledge</h4> 
 
\t \t \t \t \t <p>When you click you get 4x knowledge</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </li> 
 

 
\t \t <li><h2 href="#" id="shopAutoclicker"><a href="#">Auto-clicker</a></h2></li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopFarms"><a href="#">Farms</a></h2> 
 
\t \t \t <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="simpleminds">Simple mind's <span></span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Simple Mind</h3> 
 
\t \t \t \t \t <p>Simple mind farms 1 knowledge each second.</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a href="#" id="intelligentminds">intelligent mind's <span></span></a> 
 
\t \t \t \t <div class="shopHoverInfo"> 
 
\t \t \t \t \t <h3>Intelligent Mind</h3> 
 
\t \t \t \t \t <p>Intelligent mind farms 2 knowledge each second.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <h2 href="#" id="shopSkills"><a href="#">Skills</a></h2> 
 
\t \t \t <!-- <div class="shopDrop"> 
 
\t \t \t \t <a href="#" id="simpleminds">Simple mind's <span></span></a> 
 
\t \t \t </div> --> 
 
\t \t </li> 
 
\t </ul> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Es wäre einfacher, HTML nach Ihren Bedürfnissen zu machen. Hoffe das hilft.