jquery实现侧边点击滑动门菜单

最新推荐文章于 2024-07-06 18:15:00 发布

weixin_33967071

最新推荐文章于 2024-07-06 18:15:00 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1627522

本文介绍了一个使用jQuery实现的侧边点击滑动门菜单效果。通过简单的HTML结构和CSS样式结合jQuery动画，使得左侧菜单可以在点击按钮时显示或隐藏，并伴有平滑的滑动动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="author" content="微普科技 http://www.wiipu.com" />
       <title>jquery实现侧边点击滑动门菜单</title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }
           .zmkt {
               position: relative;
               width: 500px;
               height: 400px;
               margin: 20px auto;
               background-color: #ddd;
               overflow: hidden;
           }
           #to_menu {
               position: absolute;
               top: 30px;
               width: 100px;
               height: 30px;
               line-height: 30px;
               text-align: center;
               background-color: #000;
               color: #fff;
               cursor: pointer;
           }
           .zmkt ul {
               position: absolute;
               left: -100px;
               top: 80px;
               width: 100px;
               background-color: #C397D8;
               list-style: none;
               text-align: center;
           }
       </style>
       <script src="http://xiguape.wiipu.com/basecode/js/jquery.1.9.1.min.js"></script>
       <script type="text/javascript">
           $(function(){
           var flag=true;
           $("#to_menu").click(function(){
               if(flag){
               flag=false;
               $("#to_menu").text("隐藏菜单");
               $("ul").animate({
                   left:"100px"

               })

           }else{
               flag=true;
               $("#to_menu").text("显示菜单");
               $("ul").animate({
                   left:"-100px"

               })

}


           })


           })
       </script>
   </head>
   <body>
       
       <div class="zmkt">
           <span id="to_menu">显示菜单</span>
           <ul>
               <li>首页</li>
               <li>商城</li>
               <li>详情</li>
               <li>关于我们</li>
           </ul>
       </div>
   </body>
</html>

转载于:https://my.oschina.net/kitty0107/blog/1627522