CSS3制作Dropdown下拉菜单的⽅法
:target 是CSS3 中新增的⼀个伪类，⽤以匹配当前页⾯的URI中某个标志符的⽬标元素（⽐如说当前页⾯URL下添加
#comment就会定位到id=“comment”的位置，俗称锚）。CSS3 为这个动作赋予了更加多的功能——就如同:hover ⼀样你可以做⼀些样式定义。
先上效果图
正如标题所说，本⽂是教你如何巧⽤CSS3:target伪类制作Dropdown下拉菜单，原⽣HTML+CSS，⽆JavaScript。为了吸引各位往下看，先上实际例⼦，再进⾏剖析。
Duang~ 实际例⼦其实就是DeveMobile 主题的右上⾓那个按钮，你点⼀下就会有⼀个Dropdown下拉菜单出现，在其他区域点击返回原状。请⽤⼿机扫码查看：
或者直接看这个gif 图⽚：
实例剖析
从解释原理的⾓度我们将HTML 拉出来最⼩化代码如下：
CSS Code复制内容到剪贴板
1. <a href="#dropdown-box" class="dropdown-switcher"></a>
2. <div id="dropdown-box">
3. <a href="##" class="close"></a>
4. <div class="dropdown">
5. <ul>
6. <li></li>
7. <li></li>
8. </ul>
9. </div>
⼤体上上⾯的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;html下拉菜单的制作方法
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！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论