纯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 相关文章推荐
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
如何检查一个对象是否为空
Apr 11 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的计数器程序
2006/10/09 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
php中session使用示例
2014/03/29 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP微信支付开发实例
2016/06/22 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
python实现的防DDoS脚本
2011/02/08 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
python图像处理入门(一)
2019/04/04 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python找出因数与质因数的方法
2019/07/25 Python
Python使用type动态创建类操作示例
2020/02/29 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
韩语专业本科生求职信
2013/10/01 职场文书
应届毕业生求职信
2013/11/30 职场文书
护士岗位职责
2014/02/16 职场文书
售后服务承诺函格式
2015/01/21 职场文书
在职证明书模板
2015/06/15 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
利用js实现简单开关灯代码
2021/11/23 Javascript