HTML抽屉效果的实现与展示

最新推荐文章于 2024-06-21 09:56:36 发布
最新推荐文章于 2024-06-21 09:56:36 发布
阅读量2.4k 收藏 5
点赞数
分类专栏： HTML+Javascript+CSS

    林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

       摘要：本文主要讲了HTML抽屉效果的实现与展示，最后还用bootstrap做了一个简单的实例。

一、基本原理

jQuery 隐藏方法

jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

[html]  view plain copy
  1. $("#hide").click(function(){  
  2. $("p").hide();  
  3. });  
  4.   
  5. $("#show").click(function(){  
  6. $("p").show();  
  7. });  
语法：
[html]  view plain copy
  1. $(selector).hide(speed,callback);  
  2. $(selector).show(speed,callback);  
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
[html]  view plain copy
  1. $("button").click(function(){  
  2. $("p").toggle();  
  3. });  
语法：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

[html]  view plain copy
  1. slideDown()  
  2. slideUp()  
  3. slideToggle()  

jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法：

[html]  view plain copy
  1. $(selector).slideDown(speed,callback);  
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
实例
[html]  view plain copy
  1. $("#flip").click(function(){  
  2. $("#panel").slideDown();  
  3. });  
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法：
[html]  view plain copy
  1. $(selector).slideUp(speed,callback);  
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
实例
[html]  view plain copy
  1. $("#flip").click(function(){  
  2. $("#panel").slideUp();  
  3. });  
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
[html]  view plain copy
  1. $(selector).slideToggle(speed,callback);  

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
实例
[html]  view plain copy
  1. $("#flip").click(function(){  
  2. $("#panel").slideToggle();  
  3. });  

二、应用实例

1、上下收缩


      这里运用了jquery来实现上下收缩

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2.     
  3. <html xmlns="http://www.w3.org/1999/xhtml" >    
  4. <head>    
  5.     <title>抽屉菜单</title>    
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.     <style type="text/css">    
  8.         .MenuPanel    
  9.         {    
  10.             padding-bottom:20px;    
  11.         }    
  12.         .MenuTitle    
  13.         {    
  14.             width:150px;    
  15.             height:30px;    
  16.             font-size:20px;    
  17.             padding-left:10px;    
  18.             padding-top:5px;    
  19.             cursor:pointer;  
  20.             border:#ffbc66 1px solid;    
  21.         }    
  22.         .MenuContent    
  23.         {    
  24.             width:108px;    
  25.             font-size:16px;    
  26.             padding:20px 10px 20px 40px;    
  27.             border:#ffbc66 1px solid;    
  28.         }    
  29.     </style>    
  30.     
  31.     <script src="jquery-1.8.1.min.js" type="text/javascript"></script>    
  32.     <script type="text/javascript">    
  33.         $(document).ready(function(){    
  34.             $(".MenuPanel").each(function(){    
  35.                 $(this).children(".MenuContent").hide();    
  36.             });    
  37.                 
  38.             $(".MenuTitle").each(function(){    
  39.                 $(this).click(function(){    
  40.                         
  41.                     if($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none"){    
  42.                         $(this).parents(".MenuPanel").children(".MenuContent").slideUp();       
  43.                     }else{    
  44.                         $(this).parents(".MenuPanel").children(".MenuContent").slideDown();    
  45.                     }    
  46.                 });    
  47.                     
  48.             });    
  49.             
  50.         });    
  51.         
  52.         
  53.     </script>    
  54. </head>    
  55. <body>    
  56.     <form id="form1">    
  57.     <div>    
  58.         <div class="MenuPanel">    
  59.             <div class="MenuTitle">第一菜单</div>    
  60.             <div class="MenuContent">    
  61.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  62.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  63.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  64.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  65.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  66.             </div>    
  67.         </div>    
  68.         <div class="MenuPanel">    
  69.             <div class="MenuTitle">第二菜单</div>    
  70.             <div class="MenuContent">    
  71.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  72.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  73.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  74.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  75.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  76.             </div>    
  77.         </div>    
  78.         <div class="MenuPanel">    
  79.             <div class="MenuTitle">第三菜单</div>    
  80.             <div class="MenuContent">    
  81.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  82.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  83.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  84.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  85.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  86.             </div>    
  87.         </div>    
  88.         <div class="MenuPanel">    
  89.             <div class="MenuTitle">第四菜单</div>    
  90.             <div class="MenuContent">    
  91.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  92.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  93.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  94.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  95.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  96.             </div>    
  97.         </div>    
  98.     </div>    
  99.     </form>    
  100. </body>    
  101. </html>  
这里主要的命令是slideDown与slideUp
来看看效果：



2、左右收缩的效果

      这里运用了jquery来实现左右收缩

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2.     
  3. <html xmlns="http://www.w3.org/1999/xhtml" >    
  4. <head>    
  5.     <title>抽屉菜单</title>    
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.     <style type="text/css">    
  8.         .MenuPanel    
  9.         {    
  10.             padding-bottom:20px;    
  11.         }    
  12.         .MenuTitle    
  13.         {    
  14.             width:150px;    
  15.             height:30px;    
  16.             font-size:20px;    
  17.             padding-left:10px;    
  18.             padding-top:5px;    
  19.             cursor:pointer;  
  20.             border:#ffbc66 1px solid;    
  21.         }    
  22.         .MenuContent    
  23.         {    
  24.             width:108px;    
  25.             font-size:16px;    
  26.             padding:20px 10px 20px 40px;    
  27.             border:#ffbc66 1px solid;    
  28.         }    
  29.     </style>    
  30.     
  31.     <script src="jquery-1.8.1.min.js" type="text/javascript"></script>    
  32.     <script type="text/javascript">    
  33.         $(document).ready(function(){    
  34.             $(".MenuPanel").each(function(){    
  35.                 $(this).children(".MenuContent").hide();    
  36.             });    
  37.                 
  38.             $(".MenuTitle").each(function(){    
  39.                 $(this).click(function(){    
  40.                         
  41.                     if($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none"){    
  42.                         $(this).parents(".MenuPanel").children(".MenuContent").hide("slow");       
  43.                     }else{    
  44.                         $(this).parents(".MenuPanel").children(".MenuContent").show("slow");;    
  45.                     }    
  46.                 });    
  47.                     
  48.             });    
  49.             
  50.         });    
  51.         
  52.         
  53.     </script>    
  54. </head>    
  55. <body>    
  56.     <form id="form1">    
  57.     <div>    
  58.         <div class="MenuPanel">    
  59.             <div class="MenuTitle">第一菜单</div>    
  60.             <div class="MenuContent">    
  61.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  62.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  63.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  64.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  65.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  66.             </div>    
  67.         </div>    
  68.         <div class="MenuPanel">    
  69.             <div class="MenuTitle">第二菜单</div>    
  70.             <div class="MenuContent">    
  71.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  72.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  73.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  74.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  75.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  76.             </div>    
  77.         </div>    
  78.         <div class="MenuPanel">    
  79.             <div class="MenuTitle">第三菜单</div>    
  80.             <div class="MenuContent">    
  81.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  82.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  83.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  84.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  85.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  86.             </div>    
  87.         </div>    
  88.         <div class="MenuPanel">    
  89.             <div class="MenuTitle">第四菜单</div>    
  90.             <div class="MenuContent">    
  91.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  92.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  93.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  94.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a><br />    
  95.                 <a href="http://blog.csdn.net/evankaka" target="_blank">子菜单</a>    
  96.             </div>    
  97.         </div>    
  98.     </div>    
  99.     </form>    
  100. </body>    
  101. </html>  

这里主要的命令是show("slow")与hide("slow")


3、基于bootstrap的效果

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <title></title>  
  5.     <link href="bootstrap.min.css" rel="stylesheet">  
  6.     <style>  
  7.         #main-nav {  
  8.             margin-left: 1px;  
  9.         }  
  10.   
  11.             #main-nav.nav-tabs.nav-stacked > li > a {  
  12.                 padding: 10px 8px;  
  13.                 font-size: 12px;  
  14.                 font-weight: 600;  
  15.                 color: #4A515B;  
  16.                 background: #E9E9E9;  
  17.                 background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);  
  18.                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));  
  19.                 background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);  
  20.                 background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);  
  21.                 background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);  
  22.                 background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);  
  23.                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');  
  24.                 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";  
  25.                 border: 1px solid #D5D5D5;  
  26.                 border-radius: 4px;  
  27.             }  
  28.   
  29.                 #main-nav.nav-tabs.nav-stacked > li > a > span {  
  30.                     color: #4A515B;  
  31.                 }  
  32.   
  33.                 #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {  
  34.                     color: #FFF;  
  35.                     background: #3C4049;  
  36.                     background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);  
  37.                     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));  
  38.                     background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);  
  39.                     background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);  
  40.                     background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);  
  41.                     background: linear-gradient(top, #4A515B 0%,#3C4049 100%);  
  42.                     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');  
  43.                     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";  
  44.                     border-color: #2B2E33;  
  45.                 }  
  46.   
  47.                     #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {  
  48.                         color: #FFF;  
  49.                     }  
  50.   
  51.             #main-nav.nav-tabs.nav-stacked > li {  
  52.                 margin-bottom: 4px;  
  53.             }  
  54.   
  55.         /*定义二级菜单样式*/  
  56.         .secondmenu a {  
  57.             font-size: 10px;  
  58.             color: #4A515B;  
  59.             text-align: center;  
  60.         }  
  61.   
  62.         .navbar-static-top {  
  63.             background-color: #212121;  
  64.             margin-bottom: 5px;  
  65.         }  
  66.   
  67.         .navbar-brand {  
  68.             background: url('') no-repeat 10px 8px;  
  69.             display: inline-block;  
  70.             vertical-align: middle;  
  71.             padding-left: 50px;  
  72.             color: #fff;  
  73.         }  
  74.     </style>  
  75. </head>  
  76.   
  77. <body>  
  78.     <div class="navbar navbar-duomi navbar-static-top" role="navigation">  
  79.         <div class="container-fluid">  
  80.             <div class="navbar-header">  
  81.                 <a class="navbar-brand" href="" id="logo">后台系统  
  82.                 </a>  
  83.             </div>  
  84.         </div>  
  85.     </div>  
  86.     <div class="container-fluid">  
  87.         <div class="row">  
  88.             <div class="span2">  
  89.                 <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">  
  90.                     <li class="active">  
  91.                         <a href="#">  
  92.                             <i class="glyphicon glyphicon-th-large"></i>  
  93.                             首页        
  94.                         </a>  
  95.                     </li>  
  96.                     <li>  
  97.                         <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">  
  98.                             <i class="glyphicon glyphicon-cog"></i>  
  99.                             单元管理1  
  100.                                <span class="pull-right glyphicon glyphicon-chevron-down"></span>  
  101.                         </a>  
  102.                         <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">  
  103.                             <li><a href="#"><i class="glyphicon glyphicon-user"></i>管理1</a></li>  
  104.                             <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>管理2</a></li>  
  105.                             <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>管理3</a></li>  
  106.                             <li><a href="#"><i class="glyphicon glyphicon-edit"></i>管理4</a></li>  
  107.                             <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>管理5</a></li>  
  108.                         </ul>  
  109.                     </li>  
  110.                     <li>  
  111.                         <a href="">  
  112.                             <i class="glyphicon glyphicon-credit-card"></i>  
  113.                             单元管理2  
  114.                         </a>  
  115.                     </li>  
  116.   
  117.                     <li>  
  118.                         <a href="">  
  119.                             <i class="glyphicon glyphicon-globe"></i>  
  120.                              单元管理3  
  121.                             <span class="label label-warning pull-right">5</span>  
  122.                         </a>  
  123.                     </li>  
  124.   
  125.                     <li>  
  126.                         <a href="">  
  127.                             <i class="glyphicon glyphicon-calendar"></i>  
  128.                              单元管理4  
  129.                         </a>  
  130.                     </li>  
  131.                     <li>  
  132.                         <a href="#">  
  133.                             <i class="glyphicon glyphicon-fire"></i>  
  134.                              单元管理5  
  135.                         </a>  
  136.                     </li>  
  137.   
  138.                 </ul>  
  139.             </div>  
  140.             <div class="span10">  
  141.                 主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口主窗口  
  142.             </div>  
  143.         </div>  
  144.     </div>  
  145.     <script src="jquery-2.1.4.min.js"></script>  
  146.     <script src="bootstrap.min.js"></script>  
  147.     <script>  
  148.     </script>  
  149. </body>  
  150. </html>  
      栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

      对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

上面代码效果如下：

可能黑客
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html 右侧抽屉菜单,html5+css3实现抽屉菜单
weixin_30432831的博客
06-03 1807
抽屉菜单在手机native应用中很常见。比如酷狗手机版的界面：左侧为操作菜单，默认不显示。需要时向左滑动界面，操作菜单将从侧边缓缓展示出来，不需要时向右滑动界面，操作菜单又将隐藏在侧边而不会占位置，操作菜单这种缓入缓出用户体验非常不错。这里采用css3实现抽屉菜单效果。以下代码以及实例请在基于webkit手机浏览器下访问。html代码如下：1 2 3 4 View Code样式代码...
html5抽屉式滑动菜单栏.zip
07-26
使用jQuery+css3实现抽屉菜单，html5滑动菜单效果，可以选择从上下左右四个方向滑入
使用css实现打开抽屉效果（css过渡动画）
最新发布
JulyNight的博客
06-21 318
使用css实现鼠标悬浮打开抽屉效果
侧边导航栏（抽屉式设计）界面 (html + css)
热门推荐
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
html实现抽屉式效果,抽屉式效果.html
weixin_32148209的博客
06-04 1109
Document* {margin: 0px;padding: 0px;}body {background: url('img/bg.jpg')}.box {width: 1100px;height: 430px;margin: 120px auto;}.box ul li {list-style-type: none;width: 100px;height: 429px;float: left;...
html+css侧边抽屉式导航栏
09-14
html+css侧边抽屉式导航栏
HTML 底部弹窗 抽屉效果
07-28
在实现HTML底部弹窗的抽屉效果时，主要涉及以下几个技术点： 1. HTML结构：首先，我们需要创建一个HTML元素作为弹窗的基础框架。这个元素通常被设置为隐藏，当触发某些事件（如点击按钮）时，才会显示出来。例如，...
jquery抽屉式图片展示效果特效代码
03-20
3. **动画（Animation）**：jQuery的`slideToggle()`方法是实现抽屉效果的关键，它可以将元素以滑动的方式显示或隐藏。例如，`$("#drawer").slideToggle("slow")`会让ID为"drawer"的元素以慢速进行展开或收起的动画...
html5仿手机侧边抽屉式滑动菜单效果代码
11-03
在这个"html5仿手机侧边抽屉式滑动菜单效果代码"中，我们主要探讨的是如何利用HTML5，结合CSS3和可能的JavaScript，来实现手机应用中常见的侧边抽屉式导航菜单。这种菜单通常在屏幕边缘滑出，为用户提供一个简洁且不...
抽屉效果的实现
10-20
在实现抽屉效果时，首先需要在布局XML文件中添加`DrawerLayout`作为根节点，并设置相应的属性，如`android:layout_width`、`android:layout_height`以及`android:drawerGravity`来控制抽屉的位置。然后，在`...
网页实现抽屉效果，使用HTML和js，参杂了点css
06-23
用一个放在网页左侧的div，实现抽屉效果。在IE下能运行，效果一实现，人就懒了。
html+css 实现简易导航栏功能
09-22
主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
抽屉式图片展示效果(jQuery)
01-20
12. **`js`**目录：包含了实现抽屉效果的JavaScript文件，可能有主脚本文件和一些辅助函数。 13. **`css`**目录：存储CSS样式表，定义了抽屉式图片展示的视觉样式和动画效果。 要实现这样的效果，首先需要在HTML中...
HTML实现双抽屉效果
Casey-z的博客
11-17 718
记录： 双抽屉效果： 描述： 使用css、js实现效果。 代码块： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
html抽屉效果,HTML+CSS入门 CSS前端抽屉布局讲解
weixin_42545664的博客
06-03 2028
本篇教程介绍了HTML+CSS入门 CSS前端抽屉布局讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<一、效果图以下我对抽屉主页进行模拟布局。官方网站效果图：模拟网站图：二、实现步骤1、整体布局(header、body、footer)抽屉的首页主要分为三块：头部、网页内容、底部内容。2、header实现header由logo、内容菜单、登录菜单、搜索框四部分组成。代码...
要在个人网站中实现一个左侧抽屉式分享浮动导航，你可以使用HTML、CSS和JavaScript来创建这个交互效果
BLOG域名:programb.blog.csdn.net
07-08 1926
在这个示例中，我们创建了一个名为.drawer-container的固定位置容器，它默认位于屏幕左侧之外（left: -300px）。在JavaScript中，我们给按钮添加了一个点击事件监听器，当点击按钮时，会切换.drawer元素的.active类，从而实现导航的打开和关闭效果。要在个人网站中实现一个左侧抽屉式分享浮动导航，你可以使用HTML、CSS和JavaScript来创建这个交互效果。CSS中的.active类用于改变.drawer-container的left属性，使其从左侧滑出。
html左侧抽屉,js抽屉drawer插件
weixin_28802499的博客
06-03 1449
用作：1. 从侧边栏滑入滑出需要展示的内容介绍：1. 插件遵循了UMD通用模块定义规范，能够在各种js环境下运行2. 依赖jQuery3. 插件可进行配置各项参数，具体如下注释部分4. 插件暴露了open、close方法，用于打开和关闭抽屉使用：1. 在html中定义抽屉中需要展示的内容，并放置在最外层元素下2. 页面加载完成之后，获取定义的元素，并调用drawer方法初始化插件，同时保存返回的d...
html做抽屉效果,CSS3实现图片抽屉式效果的示例代码
weixin_35353583的博客
06-03 839
老规矩，先放图片效果图：这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码；HTML代码：国际美妆抢先看 女神标准大讨论 吃货也能越吃越瘦 连衣裙抢头条 宫三女主美妆对决 CSS代码：*{ margin:0;padding...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值