search

Home >Web Front-end >JS Tutorial >Beautiful smooth secondary drop-down menu effect code implemented by jQuery_jquery

Beautiful smooth secondary drop-down menu effect code implemented by jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:07:571552browse

The example in this article describes the exquisite smooth secondary drop-down menu effect implemented by jQuery. Share it with everyone for your reference, the details are as follows:

This is a downward secondary navigation menu effect implemented by jQurey. The effect is very good, extending smoothly from top to bottom, giving people a coordinated and beautiful feeling! The js and html code structure is simple and clear, easy to use and modify!

The screenshot of the running effect is as follows:

The specific 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实现精美二级菜单——js特效大全</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/normal Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; }
a img { border:none; }
#content { width:800px; margin:30px auto; }
.main_nav { width:100%; height:30px; }
.main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; }
.main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; }
.main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; }
.main_nav ul li dl dd { height:31px; }
.main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; }
.main_nav ul li dl dd a:hover { background:#333; color:#ccc; }
.click { margin-top:200px; }
</style>
</head>
<body>
<div id="content">
 <div class="main_nav hover">
  <ul>
   <li><a href="#" title="js特效大全">网页特效</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效 </a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
    </dl>
   </li>
   <li><a href="#" title="js特效大全">网页设计</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网页制作</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作 </a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网站优化</a>
    <dl>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化 </a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
    </dl>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(".hover ul li").hover(function(){
  $(this).children("dl").slideDown(300)
}, function(){
  $(this).children("dl").slideUp(100)
});
</script>
</body>
</html>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and skills summary", "jQuery extension skills summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summary of submission methods of validate and form plug-ins in jquery_javascript skillsNext article：Summary of submission methods of validate and form plug-ins in jquery_javascript skills

Related articles

See more