jquery - 左边栏菜单滑动隐藏/显示

最新推荐文章于 2024-05-06 00:37:37 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-05-06 00:37:37 发布

阅读量2.7k

点赞数

分类专栏： div+css 文章标签： css div javascript

本文链接：https://blog.csdn.net/boyit0/article/details/40046745

版权

div+css 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

<!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" />
    <head>  
    <title>jquery - 左边栏菜单隐藏/显示</title>  
<script src="js/1.3.2.js"></script>
    <script>  
      $(document).ready(function(){  
      
        /** 通过点击展开左边栏 **/  
        $("#pull").click(function(){  
          if($("#mydiv").css("left") == "0px")  
          {  
            $("#mydiv").animate({left:"-150px"});  
          }  
          else  
          {  
            $("#mydiv").animate({left:"0px"});  
          }  
        });  
          
        /** 通过鼠标进出来展开与收缩左边栏 **/  
        /**  
        $("#pull").mouseover(function(){  
          $("#mydiv").animate({left:"0px"});  
        });  
        $("#pull").mouseout(function(){  
          $("#mydiv").animate({left:"-150px"});  
        });  
        **/  
      
        /** 首页连接 **/  
        /*$("#aIndex").click(function(){  
          $("#maindiv").load("http://xieruilin.iteye.com/");  
        });*/  
      });  
    </script>  
    <style> 
	body{ margin:0; padding:0; width:100%; height:100%;}
      #mydiv  
      {  
        width:200px;  
        height: 100%;  
        position: absolute;  
        top:0;  
        left:-150px;  
      }  
      #maindiv  
      {  
        width:100%;  
        height: 100%;  
        position: absolute;  
        top:0;  
        left:0;  
      }  
    </style>  
    </head>  
    <body>  
      
    <div id="maindiv">  
    </div>  
      
    <div id="mydiv">  
      <div style="background:#69F;width:150px;height:100%;float: left;color:#FFFFFF;">  
       菜单栏
      </div>  
      <div style="width:50px;height:100%;float: left;">  
        <div id="pull" style="background:#999;width:20px;height:20px;color:yellow;cursor:pointer;">  
          拉  
        </div>  
      </div>  
    </div>  
      
    </body>  
    </html>

夏末_阳光依然耀眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery - 左边栏菜单滑动隐藏/显示

jquery - 左边栏菜单隐藏/显示 $(document).ready(function(){ /** 通过点击展开左边栏 **/ $("#pull").click(function(){ if($("#mydiv").css("left") == "0px")
复制链接

扫一扫