Home >Web Front-end >JS Tutorial >jquery implements the simplest sliding menu effect code_jquery

jquery implements the simplest sliding menu effect code_jquery

WBOYOriginal: 2016-05-16 15:39:491213browse

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>

I hope this article will be helpful to everyone’s 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：Backend left management menu code implemented by js_javascript skillsNext article：Backend left management menu code implemented by js_javascript skills

See more

jquery implements the simplest sliding menu effect code_jquery

Related articles