纯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游戏之是男人就下100层代码打包
Nov 08 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
JS触摸与手势事件详解
May 09 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
详解vite2.0配置学习(typescript版本)
Feb 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
一段实时更新的时间代码
2006/07/07 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python logging模块handlers用法详解
2020/08/14 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
中文专业毕业生自荐信
2014/05/24 职场文书
党的生日演讲稿
2014/09/10 职场文书
写给老师的感谢信
2015/01/20 职场文书
教师思想工作总结2015
2015/05/13 职场文书
初中家长意见
2015/06/03 职场文书
现实表现证明材料
2015/06/19 职场文书
Python Pandas 删除列操作
2022/03/16 Python