纯CSS实现滑动下拉效果

我这段时间在写一个媒体模板,打算今后替换乌徒邦的主题,让乌徒邦转型做专门的媒体平台。在这个模板撰写过程中,发现了一种直接写css就可以实现以前的下拉菜单的效果。

以前我们实现下拉菜单,使用:hover来控制其显示和隐藏,但是要实现下拉过程的平滑过渡,而不是突然出现,则常常希望平滑的下拉和收缩。我以前使用jquery的slideUp/slideDown或者animate来实现,但是其实这种效率比较低,下拉和收缩都没有那么敏锐。后来,我写了一段css,实现了同样的效果,如下:

<div class="nav">
    <ul class="menu">
        <li><a href="index.html">首页</a></li>
        <li class="menu-item-has-children"><a href="parent.html">新闻</a>
            <ul class="sub-menu">
                <li><a href="child.html">聚焦<span>热门媒体事件</span></a></li>
                <li><a href="child.html">学界<span>新闻传播学最新科研报道</span></a></li>
                <li><a href="child.html">外媒<span>国外媒体的发展</span></a></li>
                <li><a href="child.html">新媒态<span>新闻媒体业界创意颠覆</span></a></li>
            </ul>
        </li>
        <li><a href="parent.html">产品</a></li>
        <li><a href="parent.html">访谈</a></li>
        <li><a href="parent.html">专栏</a></li>
    </ul>
</div>

css如下来写:

.nav {
    clear: left;
    float: left;
}
.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.nav ul li {
    display: inline;
    margin-right: 35px;
}
.nav ul li a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}
.nav ul li a:hover {
    color: #DF3120;
}
.nav ul li.menu-item-has-children > a:after {
    content:"";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #000;
    font-size: 0;
    line-height: 0;
    margin-left: 5px;
    transition: all .2s;
}
.nav ul li.menu-item-has-children > a:hover:after {
    border-top-color: #DF3120;
}
.nav ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1124px;
    margin-top: -1px;
    background-color: #fff;
    height: 0;
    overflow: hidden;
    transition: all .2s;
}
.nav li:hover ul.sub-menu {
    padding-top: 20px;
    height: 60px;
}
.nav ul.sub-menu li {
    float: left;
}
.nav ul.sub-menu li a span {
    display: block;
    font-size: .8em;
    font-weight: normal;
    color: #a9a9a9;
    transition: color .2s;
}

上面红色的css代码,即实现了我们要的下拉效果。

2015-10-27