绵阳梓潼网站制作公司

CSS3怎么制作Dropdown下拉菜单

这篇文章主要讲解了“CSS3怎么制作Dropdown下拉菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3怎么制作Dropdown下拉菜单”吧！

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站制作、网站设计、外贸网站建设、微信公众号开发、电商网站开发，小程序设计，软件按需网站开发等一站式互联网企业服务。


先上效果图

正如标题所说，本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单，原生HTML+CSS，无JavaScript。为了吸引各位往下看，先上实际例子，再进行剖析。

Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮，你点一下就会有一个Dropdown下拉菜单出现，在其他区域点击返回原状。

直接看这个gif 图片：
CSS3怎么制作Dropdown下拉菜单

实例剖析

从解释原理的角度我们将HTML 拉出来最小化代码如下：

CSS Code复制内容到剪贴板

  1.   

  2.   

  3.        

  4.        

  5.     

        

    •         

    •   

    •         

    •   

    •     

      

  

大体上上面的HTML代码可以分为两部分，一部分是一个出发下拉动作的入口（我习惯称为“开关”）——通常是一个button（实例是将a标签替换为一个button的功能）；一部分就是触发动作的下拉菜单显示了。

可能你会问close 这个类修饰的a标签那段是做什么的？当你触发下拉菜单后，有时候需要做关闭（返回原状）的动作，而从具体情况（比如说如本实例触发菜单后菜单将原来的开关都掩盖了）或者用户体验上考虑，最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。这个a标签就是实现在打开开关后产生一个透明的遮罩层覆盖到屏幕上。

有了上面的思路，那么再具体化为下面的代码（忽略个别无关紧要的样式，SASS代码）：

CSS Code复制内容到剪贴板

  1. #dropdown-box {   

  2. .dropdown {   

  3.     opacity: 0;   

  4.     @include transform(scale(0, 0));   

  5.     @include transition(all 0.3s ease);   

  6.     overflow: hidden;   

  7.     z-index: 100;   

  8.     transform-origin: 100% 0;   

  9.     -webkit-transform-origin: 100% 0;   

  10.     -ms-transform-origin: 100% 0;   

  11.     -moz-transform-origin: 100% 0;   

  12.     }   

  13. }   

  14. .close {   

  15.     display: none;   

  16.     position: fixed;   

  17.     top: 0;   

  18.     rightright: 0;   

  19.     bottombottom: 0;   

  20.     left: 0;   

  21.     z-index: 999;   

  22.     width: 100%;   

  23.     height: 100%;   

  24.     background: transparent;   

  25. }   

  26. &:target .dropdown {   

  27.     @include transform(scale(1, 1));   

  28.     opacity: 1;   

  29.     z-index: 9999;   

  30. }   

  31. &:target .close {   

  32.     display: block;   

  33. }   

  34. }  

稍微解释下上面的SASS代码：默认的情况下是隐藏下拉菜单（采用透明属性opacity 与CSS3的transform的scale 缩小至0，遮罩层则默认隐藏）；当开关触发后透明度变为1且放到至正常的一倍，同时遮罩层显示。为了让下拉菜单更显“下拉”的情况，采用CSS3的origin定位下转换原点。

注意下兼容性，所有主流浏览器均支持 :target，除了 IE8 及更早的版本，移动端的话直接用。稍微理解下你就可以运用到自己的项目中了，have fun！

感谢各位的阅读，以上就是“CSS3怎么制作Dropdown下拉菜单”的内容了，经过本文的学习后，相信大家对CSS3怎么制作Dropdown下拉菜单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


网站标题：CSS3怎么制作Dropdown下拉菜单
分享网址：http://myzitong.com/article/psjdpd.html

其他资讯