当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS3制作Dropdown下拉菜单的方法

CSS3制作Dropdown下拉菜单的方法

2019年07月25日  | 移动技术网IT编程  | 我要评论

戏曲简介,mp8,qq空间小窝皮肤

:target 是css3 中新增的一个伪类，用以匹配当前页面的uri中某个标志符的目标元素（比如说当前页面url下添加#comment就会定位到id=“comment”的位置，俗称锚）。css3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。
先上效果图

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

duang~ 实际例子其实就是devemobile 主题的右上角那个按钮，你点一下就会有一个dropdown下拉菜单出现，在其他区域点击返回原状。请用手机扫码查看：
2015718172746643.png (280×280)

或者直接看这个gif 图片：
2015718172920193.gif (208×247)

实例剖析

从解释原理的角度我们将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;   
  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！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网