日期:2014-05-17  浏览次数:20569 次

由纯CSS3实现的超酷飞行状下拉菜单特效

日期:2012-4-26??来源:GBin1.com

由纯CSS3实现的超酷飞行状下拉菜单特效

在线演示 ? 本地下载

今天介绍一款来自script-tutorial的超酷飞行状菜单特效,和传统的下拉菜单不同,它的子菜单都是水平飞入而非滑动下拉出现,非常的与众不同,希望大家喜欢!

HTML代码

首先这里我们定义HTML菜单项目,使用li来构建菜单内容,如下:

<ul id="nav">
    <li><a href="http://www.script-tutorials.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.script-tutorials.com/flying-css3-navigation-menu/">Back</a></li>
</ul>

CSS代码

定义CSS代码:

...

来源:由纯CSS3实现的超酷飞行状下拉菜单特效