首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-07-15 
由纯CSS3实现的超酷飞行状下拉菜单特效日期:2012-4-26??来源:GBin1.com在线演示? 本地下载 今天介绍一款来

由纯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 href="#">Menu 1</a>        <ul href="#">Menu 2</a>        <ul 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实现的超酷飞行状下拉菜单特效

热点排行