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

日期：2012-4-26  来源：

 

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

HTML代码

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

• Home


• Menu 1
  
  
  
  • Submenu 1
  
  
  • Submenu 2
  
  
  • Submenu 3
  
  
  • Submenu 4
  
  
  • Submenu 5
  
  
  
  


• Menu 2
  
  
  
  • Submenu 2-1
  
  
  • Submenu 2-2
  
  
  • Submenu 2-3
  
  
  • Submenu 2-4
  
  
  • Submenu 2-5
  
  
  • Submenu 2-6
  
  
  • Submenu 2-7
  
  
  • Submenu 2-8
  
  
  
  


• Menu 3
  
  
  
  • Submenu 3-1
  
  
  • Submenu 3-2
  
  
  • Submenu 3-3
  
  
  • Submenu 3-4
  
  
  • Submenu 3-5
  
  
  
  


• Menu 4


• Menu 5


• Menu 6


• Back

CSS代码

定义CSS代码：

....

来源：