【CSS3动画】下拉菜单模拟
下拉菜单模拟效果图：
CSS3：
<style>
#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
#box:hover{height:250px;}
#box ul{list-style:none; margin:; padding:;}
#box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
</style>
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<ul>
<li>This's 1</li>
<li>This's 2</li>
<li>This's 3</li>
<li>This's 4</li>
<li>This's 5</li>
</ul>
</div>
</body>
</html>
【CSS3动画】下拉菜单模拟的更多相关文章
- HTML5/CSS3动画下拉菜单
在线演示 本地下载
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- CSS3制作下拉菜单
导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- CSS3手风琴下拉菜单
在线演示 本地下载
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 纯CSS3实现淡入淡出下拉菜单
纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...
随机推荐
- JZOJ 5459 购物
Description X 城的商场中,有着琳琅满目的各种商品.一日,小X 带着小Y 前来购物,小Y 一共看中了n件商品,每一件商品价格为Pi.小X 现在手中共有m个单位的现金,以及k 张优惠券.小X ...
- Python3 中 configparser 使用注意事项
在使用configparser时候应注意: ①配置文件(ini文件)的存放位置:配置文件和调用文件放在同一个文件包下面. 使用read()函数读取并解析配置文件时,直接写配置文件(ini文件)的文件名 ...
- JRE System Library、Referenced Libraries、Web App Libraries的含义
JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...
- Google搜索技巧－入门篇
基本搜索 Google 查询简洁方便,仅需输入查询内容并敲一下回车键 (Enter),或单击“Google 搜索”按钮即可得到相关资料. 搜索两个及两个以上关键字 Google 只会返回那些符合您的全 ...
- Linux下安装配置maven
参考博客: http://www.blogjava.net/caojianhua/archive/2011/04/02/347559.html 注意事项: 1.解压目录 我的maven解压目录为: / ...
- Python学习笔记（二）使用Sublime Text编写简单的Python程序（）
一.使用Sublime Text编写Python 1.点击“文件” →”新建文件“ 2.点击”文件“→”保存“,并保存为.py文件 此时已经创建好Python文件了,接下来就可以编写Python程序了 ...
- Spring表达式语言:SpEl
概念: 是一个支持运行时查询和操作的对象图的强大的表达式语言. 语法类似于EL:SpEl使用#{ ...}作为定界符,所有在大括号中的 字符都将被认为是SpEl SpEl为bean的属性进行动态赋值提 ...
- li设置多选和取消选择的样式、输入数据类型判断
li设置多选和取消选择的样式: $('li').click(function(){ if($(this).hasClass('active')) {$(this).removeClass('activ ...
- Thrift源码分析（一）-- 基本概念
我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开 ...
- Directx教程(27) 简单的光照模型(6)
原文:Directx教程(27) 简单的光照模型(6) 从myTutorialD3D11_15到myTutorialD3D11_19的工程中,我们都只有一个光源,光源的位置在LightCla ...