纯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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
小程序如何构建骨架屏
May 29 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
浅谈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 mkdir()定义和用法
2009/01/14 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP获取文件行数的方法
2015/06/10 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
办公室秘书岗位职责范本
2014/02/11 职场文书
指导教师评语
2014/04/26 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2014年科协工作总结
2014/12/09 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
大学生逃课检讨书
2015/05/04 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL