web下拉菜单代码html,简单的单级下拉菜单实现_html/css_WEB-ITnose
效果预览
这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单。
基本思路
在菜单处于光标之下时显示菜单,其余时候隐藏。这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行,因为普通状态下菜单隐藏了,没办法触发 :hover ,不过下拉菜单隐藏了不是还有菜单标题么,菜单标题处于光标之下时显示菜单就能够显示出来了,但是鼠标移到菜单上的时候下拉菜单又会消失,这个时候想到给下拉菜单也加上 :hover 显示自身,但是万一脑洞大开,要做分体菜单怎么办,这个时候把它放进一个容器呗,利用标签的嵌套关系,去给容器的 :hover 伪类的派生元素写样式就一切搞定啦。
上HTML结构
12
3 Rewrite 4 5
Kotarou 6
Kotori 7
Akane 8
Kagari 9
Lucia10
Shizuru11
Chihaya121314
15 Clannad16 17
Tomoya18
Nagisa19
Ushio20
Ryou21
Kyou22
Yukine23
Fuko24
Tomoyo25
Kotomi262728
29 Air30 31
Yukito32
Misuzu33
Kano34
Minagi353637
CSS
实现的关键就在那些打惊叹号的规则,写好显示与不显示时两个状态的下拉菜单的属性。同时添加了一些渐变以及平移让菜单显示更加自然。
1 body{ margin:0; padding:0; 2 3 font-size:18px; 4 5 background-color:#aaa; 6 } 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;} 8 #dropdown-wrapper{ 9 display:block;10 11 margin:4em 1em 0 1em;12 }13 #dropdown-wrapper li{14 /*!!!!!!!!!!!!*/15 display:inline-table;16 padding:0;17 margin:0;18 19 position:relative;20 21 width:10em;22 23 background:#fff;24 25 -webkit-transition:all ease-in-out 0.3s;26 transition:all ease-in-out 0.3s;27 }28 #dropdown-wrapper span{29 display:block;30 padding:0.4em 1em;31 width:10em;32 color:#333;33 }34 #dropdown-wrapper span:after{35 display:inline-block;36 float:right;37 content:">";38 39 -webkit-transform:rotate(0deg);40 transform:rotate(0deg);/*为了渐变*/41 42 -webkit-transition:all ease-in-out 0.3s;43 transition:all ease-in-out 0.3s;44 }45 #dropdown-wrapper li:hover span:after{46 -webkit-transform:rotate(90deg);47 transform:rotate(90deg);/*划过的时候那个右箭头旋转90度,变成朝下的啦*/48 }49 #dropdown-wrapper li ul{50 /*!!!!!!!!!!!!*/51 display:block;52 position:absolute;53 54 padding:0;55 margin:0;56 57 height:0;/*平时的时候隐藏下拉列表*/58 line-height:0;/*0行高,这个的作用是用来制造一个文字展开的效果*/59 overflow:hidden;60 61 color:#555;62 63 opacity:0;64 65 -webkit-transform:translateY(-1em);66 transform: translateY(-1em);67 68 -webkit-transition:all ease-in-out 0.3s;69 transition:all ease-in-out 0.3s;70 }71 #dropdown-wrapper li ul>li{72 padding:0.7em 1em;73 74 }75 #dropdown-wrapper li:hover ul{76 /*!!!!!!!!!!!!*/77 /*这是容器处于光标下时的下拉列表的状态,78 *这个时候就是要做的就是显示下拉菜单咯79 */80 opacity:1;81 height:auto;82 line-height:1em;83 84 -webkit-transform: translaY(0);85 transform: translateY(0);86 }87 #dropdown-wrapper li:hover span{88 color:rgb(0,173,238);89 }90 #dropdown-wrapper li:hover ul>li:hover{91 background:rgb(0,173,238);92 color:#eee;93 }
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
web下拉菜单代码html,简单的单级下拉菜单实现_html/css_WEB-ITnose相关推荐
- 简单的单级下拉菜单实现
这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单. 基本思路 在菜单处于光标之下时显示菜单,其余时候隐藏.这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行 ...
- html下拉框代码默认选中状态,@Html.DropDownListFor 下拉框绑定(选择默认值)
首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); Tem ...
- Xcode5下使用纯代码构建简单的HelloWorld程序
转自:http://blog.csdn.net/developerxyf/article/details/12874935 新发布的Xcode5在使用模板创建工程的时候取消了以往是否要选择storyb ...
- php wap页下拉刷新代码,js实现的移动端下拉刷新功能代码实例
[JavaScript] 纯文本查看 复制代码var scroll = document.querySelector('.scroll'); var outerScroller = document. ...
- html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...
- python画小猪乔治_小孩挑食难搞定?试下猪肉这样炒,简单5步超下饭,比牛肉还香嫩...
我是木木育儿,国家中级育婴师,一个因为两个可爱的宝宝爱上了宝宝家庭餐和育儿领域的80后本科女. 今天要跟大家分享一道超级下饭的茭白胡萝卜炒瘦肉.这次的瘦肉,我选择了有着"黄金六两" ...
- html 下拉图片列表,图片、表单、下拉选项
图片 src 图片的地址 alt 图片的代替性文字 title 鼠标悬浮时的提示性文字 usemap 定义客服端图像映射 图像映射 title="下载"> shape 形状 ...
- linux下抓包代码阿里云,10.10 linux下抓包
监控系统状态 抓包工具 tcpdump 用法:tcpdump -nn tcpdump -nn -i ens33 tcpdump -nn port 80 tcpdump -nn not port 22 ...
- java ajax 联动菜单_二级联动菜单代码(AJAX JAVA).
二级联动菜单代码(AJAX+JAVA)珍藏 [java] pageEncoding="UTF-8"%> 二级菜单联动演示 var req; window.οnlοad=fun ...
- Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
最新文章
- 独家 | 利用Cosmos微服务改善Netflix视频质量
- USB供电不足怎么办
- Linux磁盘配额应用
- server2003进入oracle,windows server 2003安装oracle
- 基于公开数据的特殊人群在线活动特征挖掘
- sqltype java_【SQL参考】SQL数据类型与JAVA中type的对应
- Linux内核态之间进程通信,Linux 系统内核空间与用户空间通信的实现与分析[转载]...
- P2424 约数和 真丶除法分块
- 3.5用户访问使用HTTPS
- 政企用户网络安全常见风险盘点
- Ubuntu下的几种常见输入法
- 基于PHP的在线聊天室(网页版)
- 简化版WIN7安装打印机时提示“打印机无法安装,打印处理器不存在。”正确处理方法
- 关于我想往自己写的管理系统登陆界面插个背景图片却一直被复制粘贴的网络方法误导这件事---JFrame设置背景图片
- flex布局 gird布局
- 旅行青蛙服务器维护时间,旅行青蛙多久出门一次?青蛙旅行出门时间一览
- 【已解决】Failed to discover available identity versions when contacting http://controller:5000/v3.
- git合并冲突【you have not concluded your merge】
- java并发编程艺术——基础篇
- R 语言将数据的 jan 换为 1
热门文章
- 高颜值的第三方网易云播放器YesPlayMusic
- 电脑罗盘时钟html怎么设置成桌面,抖音网红款Word Clock罗盘时钟电脑桌面屏保设置教程-完整版...
- 博思得标签打印机驱动_博思得V6驱动|博思得Postek V6标签打印机驱动下载 官方版 - 比克尔下载...
- ENVI5.3.1使用Landsat 8影像进行监督分类实例操作
- 【观察】从最佳实践到行业使能,华为HiCampus定义智慧园区
- Ehcache缓存的使用
- 常见系统中文字体的英文名
- 精简win服务器系统,Windows Server 2016攻略—为云而生的极简平台Nano Server(2)
- 在电脑上如何快速制作一寸照片?在线一键制作工具推荐给你
- ZEMAX | 如何进行序列模式公差分