纯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中用于生成随机数的Math.random()方法
Jun 15 Javascript
跟我学习javascript的this关键字
May 28 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
axios封装与传参示例详解
Oct 18 Javascript
ReactRouter的实现方法
Jan 25 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(1)
2006/10/09 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
Python常用知识点汇总
2016/05/08 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
高一物理教学反思
2014/01/24 职场文书
财务部绩效考核方案
2014/05/04 职场文书
公司委托书怎么写
2014/08/02 职场文书
买卖合同协议书范本
2014/10/18 职场文书
检讨书范文
2015/01/27 职场文书
关于学习的决心书
2015/02/05 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
详解Vue的列表渲染
2021/11/20 Vue.js