4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效

小咪咪 2022-08-07 06:38 348阅读 0赞

这是一组共4种效果非常炫酷的[CSS3][]移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是：默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来实现滑动侧边栏的效果。

![QQ截图20150313115209.png][QQ_20150313115209.png]

[在线演示][Link 1]

![zip.gif][] [4种CSS3超酷移动手机滑动隐藏侧边栏菜单特效.zip][4_CSS3_.zip] (357.24 KB, 下载次数: 45)

HTML结构  
  
  
所有滑动侧边栏效果都是使用无序列表来制作的，在默认的实现中，将无序列表包装到class为mobile的div中，为了便于控制，外围还添加了一个wrapper包裹div。这个DEMO使用纯CSS制作，按钮使用的是一个checkbox输入框来制作。插件中使用了font-awesome图标字体，可以点击这里查看[font-awesome图标字体的参考和使用方法][font-awesome]。

1.  <div id="wrapper">  
    
2.    <h2>Off Canvas Menu with Animated Links</h2>  
    
3.    <div class="mobile">  
    
4.        
    
5.      <input type="checkbox" id="tm" />  
    
6.        
    
7.      <ul class="sidenav">  
    
8.        <li><a href="\#"><i class="fa fa-check"></i><b>Tasks</b></a></li>  
    
9.        <li><a href="\#"><i class="fa fa-inbox"></i><b>Messages</b></a></li>  
    
10.       <li><a href="\#"><i class="fa fa-pencil"></i><b>New Post</b></a></li>  
    
11.       <li><a href="\#"><i class="fa fa-cog"></i><b>Settings</b></a></li>  
    
12.       <li><a href="\#"><i class="fa fa-star"></i><b>Starred</b></a></li>  
    
13.       <li><a href="\#"><i class="fa fa-power-off"></i><b>Logout</b></a></li>  
    
14.     </ul>  
    
15.       
    
16.     <section>  
    
17.         
    
18.       <label for="tm">Click Me</label>  
    
19.     </section>  
    
20.   </div>  
    
21. </div>

复制代码

CSS样式  
  
  
整个包裹div被设置为相对定位，并为其设置左浮动和阴影效果。

1.  .mobile \{  
    
2.    float: left; position: relative;  
    
3.    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);  
    
4.    overflow: hidden;  
    
5.  \}

复制代码

这里的按钮制作使用了一个小技巧。作为按钮的checkbox被设置为隐藏状态，然后在<section>元素使用一个<label>元素来和它关联，将<label>制作为按钮样式，实际在点击<label>时，相当于点击了checkbox按钮。

1.  /\*Hiding the checkbox\*/  
    
2.  \#tm \{display: none;\}  
    
3.  .mobile section label \{  
    
4.    color: white; font: bold 14px Montserrat; text-align: center;  
    
5.    border: 2px solid white; border-radius: 4px;  
    
6.    display: block; padding: 10px 0;  
    
7.    width: 60%; position: absolute; left: 20%; top: 100px;  
    
8.    cursor: pointer; text-transform: uppercase;  
    
9.  \}

复制代码

按钮的点击使用了checkbox hack 技术。

1.  /\*Animate content area to the right\*/  
    
2.  \#tm:checked ~ section \{transform: translateX(150px);\}  
    
3.  /\*Animate links from right to left + fade in effect\*/  
    
4.  \#tm:checked ~ .sidenav b \{opacity: 1; transform: translateX(0);\}

复制代码

最后，为每个滑动侧边栏菜单项添加一些延迟来制作一个接一个出现的效果：

1.  \#tm:checked ~ .sidenav li:nth-child(1) b \{transition-delay: 0.08s;\}  
    
2.  \#tm:checked ~ .sidenav li:nth-child(2) b \{transition-delay: 0.16s;\}  
    
3.  \#tm:checked ~ .sidenav li:nth-child(3) b \{transition-delay: 0.24s;\}  
    
4.  \#tm:checked ~ .sidenav li:nth-child(4) b \{transition-delay: 0.32s;\}  
    
5.  \#tm:checked ~ .sidenav li:nth-child(5) b \{transition-delay: 0.40s;\}  
    
6.  \#tm:checked ~ .sidenav li:nth-child(6) b \{transition-delay: 0.48s;\}

复制代码

via: [http://www.htmleaf.com/css3/daohangcaidan/201503121508.html][http_www.htmleaf.com_css3_daohangcaidan_201503121508.html]

[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[QQ_20150313115209.png]: http://bbs.html5cn.org/data/attachment/forum/201503/13/1151216bf767oozh88e678.png
[Link 1]: http://www.htmleaf.com/Demo/201503121509.html
[zip.gif]: http://bbs.html5cn.org/static/image/filetype/zip.gif
[4_CSS3_.zip]: http://bbs.html5cn.org/forum.php?mod=attachment&aid=MjczMTF8YWZkNGIxOWR8MTQyNjY3OTE5NnwwfDg2NjM1
[font-awesome]: http://www.htmleaf.com/ziliaoku/font-awesome/2014100887.html
[http_www.htmleaf.com_css3_daohangcaidan_201503121508.html]: http://www.htmleaf.com/css3/daohangcaidan/201503121508.html