2016-10-13 44 views
0

我是新來的jQuery和相當新的HTML/CSS,但因爲我是通過親身體驗學習的類型,我已經建立一個網站的做法,而我學到新的東西並且一直在試驗我想最終在真正的網站上實施的元素。彈跳滑動菜單與jQuery

我一直在試圖建立當光標懸停在菜單項激活一個適當的滑動菜單。我設法讓菜單滑出去,但是如果我將光標移動到滑出菜單中,整個事情就會開始彈起!我試過利用.stop(),但它閃爍!

我發現從人非常相似的(如果不相同)問題上的問題在這裏和其他網站,但我覺得我不理解任何爲他們工作的答案。我需要視覺效果,並且像「插入if(){}語句」這樣的答案讓我困惑,因爲我不知道該把它放在哪裏。如果我按照我的源代碼指示我執行的操作(在底層函數中放置檢查/ if語句),它似乎會破壞代碼,然後菜單甚至不會滑出。

它一直非常令人沮喪,當我感到太沮喪時(比如六個小時後),我無法想象解決方案,所以如果有人能幫我找到我的代碼中的錯誤或給我一個相當詳細的我可以做些什麼來解決這個彈跳問題,以及它是如何開始的,我真的很感激它。

我已經附加了JQ,HTML,CSS &。提前致謝。

$(document).ready(function() { 
 
    $('.dropdown').hover(
 
    function() { 
 
     $(this).children(".sub-menu").slideDown(200); 
 
    }, 
 
    function() { 
 
     $(this).children(".sub-menu").slideUp(200); 
 
    } 
 
); 
 

 
});
nav { 
 
    background-color: #000000; 
 
    padding:10px 0; 
 
    text-align:center; 
 
} 
 

 
nav li { 
 
    margin: 10px; 
 
    padding: 0 10px; 
 
    display: inline; 
 
} 
 

 
nav ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
nav a { 
 
    font-size: 30px; 
 
    height: 35px; 
 
    line-height: 30px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover, 
 
nav a:focus, 
 
nav a:active { 
 
    color: #ff0000; 
 
} 
 

 
nav ul li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
nav li ul { 
 
    background-color:#000000; 
 
    position:absolute; 
 
    left:0; 
 
    top:50px; 
 
    width:200px; 
 
} 
 

 
nav li li a { 
 
    position:relative; 
 
    font-size:25px; 
 
    margin:0; 
 
    padding:0; 
 
    display:block; 
 
} 
 

 
ul.sub-menu { 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<ul> 
 
    <li><a href=""><b>Home</b></a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Inspiration</a></li> 
 

 
    <li class="dropdown"><a href="">Find</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Ebooks</a></li> 
 
     <li><a href="">PDFs</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li><a href="">News</a></li> 
 

 
    <li class="dropdown"><a href="">Contact Us</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">E-mail List</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li class="dropdown"><a href="">Extras</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Coming Soon</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>

回答

1

你有你的<li>元素和下拉菜單之間的空間(You can see it here)。 只需刪除/移動它。

我做

nav { 
    [...] 
    // padding: 10px 0; 
    padding: 0; 
} 
nav li { 
    [...] 
    // padding: 0 10px; 
    padding: 10px; 
} 

$(document).ready(function() { 
 
    $('.dropdown').hover(
 
    function() { 
 
     $(this).children(".sub-menu").slideDown(200); 
 
    }, 
 
    function() { 
 
     $(this).children(".sub-menu").slideUp(200); 
 
    } 
 
); 
 

 
});
nav { 
 
    background-color: #000000; 
 
    padding: 0; 
 
    text-align:center; 
 
} 
 

 
nav li { 
 
    margin: 10px; 
 
    padding: 10px; 
 
    display: inline; 
 
} 
 

 
nav ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
nav a { 
 
    font-size: 30px; 
 
    height: 35px; 
 
    line-height: 30px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover, 
 
nav a:focus, 
 
nav a:active { 
 
    color: #ff0000; 
 
} 
 

 
nav ul li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
nav li ul { 
 
    background-color:#000000; 
 
    position:absolute; 
 
    left:0; 
 
    top:50px; 
 
    width:200px; 
 
} 
 

 
nav li li a { 
 
    position:relative; 
 
    font-size:25px; 
 
    margin:0; 
 
    padding:0; 
 
    display:block; 
 
} 
 

 
ul.sub-menu { 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<ul> 
 
    <li><a href=""><b>Home</b></a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Inspiration</a></li> 
 

 
    <li class="dropdown"><a href="">Find</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Ebooks</a></li> 
 
     <li><a href="">PDFs</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li><a href="">News</a></li> 
 

 
    <li class="dropdown"><a href="">Contact Us</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">E-mail List</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li class="dropdown"><a href="">Extras</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Coming Soon</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>

+0

什麼是地獄?那是它? CSS?爲了善良的緣故。那麼,它解決了我的問題。謝謝,Robiseb。 – Pyrrly

0

更改CSS在nav li ul其中top:50pxpadding-top:23px

$(document).ready(function() { 
 
    $('.dropdown').hover(
 
    function() { 
 
     $(this).children(".sub-menu").slideDown(200); 
 
    }, 
 
    function() { 
 
     $(this).children(".sub-menu").slideUp(200); 
 
    } 
 
); 
 

 
});
nav { 
 
    background-color: #000000; 
 
    padding:10px 0; 
 
    text-align:center; 
 
} 
 

 
nav li { 
 
    margin: 10px; 
 
    padding: 0 10px; 
 
    display: inline; 
 
} 
 

 
nav ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
nav a { 
 
    font-size: 30px; 
 
    height: 35px; 
 
    line-height: 30px; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover, 
 
nav a:focus, 
 
nav a:active { 
 
    color: #ff0000; 
 
} 
 

 
nav ul li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
nav li ul { 
 
    background-color:#000000; 
 
    position:absolute; 
 
    left:0; 
 
    padding-top:23px; 
 
    width:200px; 
 
} 
 

 
nav li li a { 
 
    position:relative; 
 
    font-size:25px; 
 
    margin:0; 
 
    padding:0`; 
 
    display:block; 
 
} 
 

 
ul.sub-menu { 
 
    display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<ul> 
 
    <li><a href=""><b>Home</b></a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Inspiration</a></li> 
 

 
    <li class="dropdown"><a href="">Find</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Ebooks</a></li> 
 
     <li><a href="">PDFs</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li><a href="">News</a></li> 
 

 
    <li class="dropdown"><a href="">Contact Us</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">E-mail List</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
    </ul> 
 
    </li> 
 

 
    <li class="dropdown"><a href="">Extras</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="">Coming Soon</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>