jquery实现最简单的滑动菜单效果代码

前端技术 2023/09/09 JavaScript

本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下：

这是一款最简单的jQuery下拉滑出菜单，jQuery代码实现，这里没有过多的去修饰菜单，仅是一些基本的实现，特别是对学习jQuery是个不错的参考实例，这里使用了一个jquery封装库文件jquery.tools.min.js，从外部引入，测试时候可能会因载入不成功而看不到效果，刷新一下网页即可解决此问题。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26159

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案