纯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入门基础 document.write输出
Feb 22 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
浅谈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实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
js导入导出excel(实例代码)
2013/11/25 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
setTimeout学习小结
2017/02/08 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python中static相关知识小结
2018/01/02 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python中的集合介绍
2019/01/28 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Python-openCV开运算实例
2020/07/05 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python实现经典排序算法的示例代码
2021/02/07 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
工作态度检讨书
2014/02/11 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript