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