jquery implements the simplest sliding menu effect code

jquery implements the simplest sliding menu effect code_jquery

WBOY

Release： 2016-05-16 15:39:49

Original

1200 people have browsed it

The example in this article describes the simplest sliding menu effect code implemented by jquery. Share it with everyone for your reference. The details are as follows:

This is the simplest jQuery drop-down menu, jQuery code implementation, there is not too much to modify the menu, just some basic implementations, especially it is a good reference example for learning jQuery, here is used A jquery package library file jquery.tools.min.js is imported from the outside. During testing, the effect may not be seen due to unsuccessful loading. Refreshing the web page can solve this problem.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戏</a>
  <ul>
   <li><a href="#">单机游戏</a></li>
   <li><a href="#">网络游戏</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音乐</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">摇滚</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">编程语言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Copy after login

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