纯css下拉菜单 无需js


Posted in Javascript onAugust 15, 2016

再来个今天某人说过的例子:纯css下拉菜单:
效果图

纯css下拉菜单 无需js

这个的实现很简单,主要是:hover和过渡属性transition的使用。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css</title>
 <style>
 *{
  margin: 0;
  padding:0;
  font-size: 16px;
  font-family: "微软雅黑";
 }
 #container{
  width: 100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
 }
 #container ul{
  list-style: none;
 }
 #container span{
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
 }
 #container ul{
  height: 0;
  width: 100px;
  overflow: hidden;
  transition: all 1s;
  position: absolute;
  top: 30px;
  left: 0px;
 }
 #container:hover ul{
  height: 330px;
 } 
 #container ul li{
  background: #eee;
  margin-top: 3px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
 }
 </style>
</head>
<body>
 <div id="container">
 <span>移动</span>
 <ul>
  <li>这里有1</li>
  <li>这里有2</li>
  <li>这里有3</li>
  <li>这里有4</li>
  <li>这里有5</li>
  <li>这里有6</li>
  <li>这里有7</li>
  <li>这里有8</li>
  <li>这里有9</li>
  <li>这里有10</li>
 </ul>
 </div>
</body>
</html>

因为ul是个伸缩对象,所以要让它脱离文档流,不是在实用时会影响到布局,给它一个绝对定位即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 #Javascript
js轮盘抽奖实例分析
Apr 17 #Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 #Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 #Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
又一款js时钟!transform实现时钟效果
Aug 15 #Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 #Javascript
You might like
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
tab栏切换原理
2017/03/22 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
简单的vuex 的使用案例笔记
2018/04/13 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
django celery redis使用具体实践
2019/04/08 Python
python plotly绘制直方图实例详解
2019/07/22 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
招商专员岗位职责
2014/02/08 职场文书
2014植树节活动总结
2014/03/11 职场文书
会计员岗位职责
2014/03/15 职场文书
个人承诺书格式
2014/06/03 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
个人收入证明范本
2015/06/12 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫