html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...

利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单

以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单，名为《纯CSS制作下拉导航菜单》最近又看CSS手册发现另外一个过渡属性(Transition)，可以设置过渡弹出时间，但是遗憾的是：对于IE10以下的版本浏览器不支持。但是在IE10以下版本也是有弹出效果。所以在这里记录分享以下：

先来看以下此CSS属性：

transition-property规定设置过渡效果的 CSS 属性的名称。

transition-duration规定完成过渡效果需要多少秒或毫秒。

transition-timing-function规定速度效果的速度曲线。

transition-delay定义过渡效果何时开始。

备注(不同浏览器兼容代码)：

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:5s;

-moz-transition-delay:2s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:5s;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:5s;

-o-transition-delay:2s;

正常CSS样式：

width:100px;/*原宽度*/

height:100px;/*原高度*/

background:blue;/*背景色*/

transition-property:width;/*要过渡的样式名称*/

transition-duration:5s;/*过渡效果完成时间*/

transition-delay:2s;/*鼠标覆盖元素何时开始过渡*/

DavidszhouSEO优化原创导航块源代码如下：

Davidszhou_企业建站搜索引擎排名SEO优化_www.zongk.com

#davidszhou {width:360px; height:auto; position:}

#davidszhoua {width:360px; height:auto;}

#zongk { width:120px; float:left; height:30px; line-height:30px; overflow:hidden; transition-property:height; transition-duration:5s;}

#zongk ul { padding:0px; margin:0px; list-style:none;}

#zongk ul li { width:120px; height:30px; line-height:30px; float:left; background:#999; color:#FFF; text-align:center;}

#zongk:hover { height:150px;}

• 下拉式菜单1
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单

• 下拉式菜单2
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单

• 下拉式菜单3
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单
• 下拉式菜单

• 下拉式菜单4
• 下拉式菜单4
• 下拉式菜单4
• 下拉式菜单4
• 下拉式菜单4

• 下拉式菜单5
• 下拉式菜单5
• 下拉式菜单5
• 下拉式菜单5
• 下拉式菜单5

• 下拉式菜单6
• 下拉式菜单6
• 下拉式菜单6
• 下拉式菜单6
• 下拉式菜单6

源文件点击查看效果如图：

利用CSS过渡属性Transition制作缓缓弹出的纯CSS导航块

TAGS:导航 , 下拉菜单

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/44.html转载请标注此链接