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

作者：Davidszhou 来源:SEO优化博客时间:2015-05-02 23:42:55 点击：

利用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优化原创导航块源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Davidszhou_企业建站搜索引擎排名SEO优化_www.zongk.com</title>
</head>
<style type="text/css">
#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;}
</style>
<body>
<div id="davidszhou">
<div id="zongk">
<ul>
<li>下拉式菜单1</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
</ul>
</div>
<div id="zongk">
<ul>
<li>下拉式菜单2</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
</ul>
</div>
<div id="zongk">
<ul>
<li>下拉式菜单3</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
<li>下拉式菜单</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div id="davidszhoua">
<div id="zongk">
<ul>
<li>下拉式菜单4</li>
<li>下拉式菜单4</li>
<li>下拉式菜单4</li>
<li>下拉式菜单4</li>
<li>下拉式菜单4</li>
</ul>
</div>
<div id="zongk">
<ul>
<li>下拉式菜单5</li>
<li>下拉式菜单5</li>
<li>下拉式菜单5</li>
<li>下拉式菜单5</li>
<li>下拉式菜单5</li>
</ul>
</div>
<div id="zongk">
<ul>
<li>下拉式菜单6</li>
<li>下拉式菜单6</li>
<li>下拉式菜单6</li>
<li>下拉式菜单6</li>
<li>下拉式菜单6</li>
</ul>
</div>
</div>
</body>
</html>

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

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