Here we mainly use slideToggle () and slideUp () to show the hidden content when the target passes through the mouse:
Copy codeThe Code is as follows:
$ (Function (){
$ (". Dropdown"). hover (
Function () {$ ("li ul"). slideToggle (800 );},
Function () {$ ("li ul"). slideUp (1000 )}
)
})
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery gradient effect </title>
<Style type = "text/css">
A {text-decoration: none; color: #333 ;}
A: hover {color: # f33 ;}
A. gr {color: #227CE8 ;}
A. xg {color: # f30 ;}
A. zx {color: #690 ;}
A. yd {color: # f00 ;}
A. more-rss {color: # f60 ;}
A img {border: none ;}
A. rssfeed {display: block; height: 60px; width: 160px; cursor: pointer ;}
. Wrapper {width: 700px; margin: 0 auto; height: 460px; position: relative ;}
. Wrapper small {position: absolute; bottom: 0; left: 0; border-top: 1px dotted # b3b3b3; display: block; width: 700px; line-height: 30px; text-align: right ;}
Ul li {list-style: none ;}
Ul li. dropdown {position: relative; width: 160px ;}
Ul li. dropdown ul {display: none; text-align: center; background: # fff; border: 1px solid # ddd; width: 160px; padding: 15px 15px 20px ;}
Ul li. dropdown ul li {padding: 5px 0; border-bottom: 1px dotted # ddd ;}
</Style>
</Head>
<Body>
<Div class = "wrapper">
<H1> <a href = ""> jQuery gradient drop-down menu </a> <P> Use slideToggle and slideUp. of course, you can also use hide/show, fadeIn/fadeOut, and so on, but the effects are different and the implementation methods are the same. you must note that. add position: relative to dropdown to prevent flickering. </p>
<Ul class = "fir">
<Li class = "dropdown">
<A class = "rssfeed"> </a>
<Ul>
<Li> <a href = "#" rel = "RSS"> </a> </li>
<Li> <a href = "#" class = "xg" rel = "nofollow"> fruit subscription </a> </li>
<Li> <a href = "#" class = "gr" rel = "nofollow"> Google subscription </a> </li>
<Li> <a href = "#" class = "zx" rel = "nofollow"> shrimp subscription </a> </li>
<Li> <a href = "#" class = "yd" rel = "nofollow"> youdao subscription </a> </li>
<Li> <a href = "#" class = "more-rss" rel = "RSS"> more Methods» </a> </li>
</Ul>
</Li>
</Ul>
</Div>
<Script language = "javascript" type = "text/javascript" src = "jquery. min. js"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Function (){
$ (". Fir. dropdown"). hover (
Function (){
$ ("Li ul"). slideToggle (800 );
}, Function (){
$ ("Li ul"). slideUp (1000)
})
})
</Script>
</Body>
</Html>
Package and download test code