再续Div+Css(+Js)菜单代码_html/css_WEB-ITnose

5款纯div+css制作的弹出菜单(标准且无js)
来源： http://www.cssplay.co.uk/index.html 
整理： http://macrolong.com/blog/read.php?210
          http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=1086
如需转载请注明出处，谢谢合作！！！


一、最基本的：二级dropdown弹出菜单

HTML代码

• DEMOS
  • zero dollars
  • wrapping text
  • styled form
  • active focus
  • shadow boxing
  • image map
  • fun backgrounds
  • fade scrolling
  • em sized images
• MENUS
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• LAYOUTS
  • Fixed 1
  • Fixed 2
  • Fixed 3
  • Fixed 4
  • minimum width
• BOXES
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• MOZILLA
  • drop down menu
  • cascading menu
  • content:
  • mozzie box
  • rainbow box
  • snooker cue
  • target practise
  • two tone headings
  • shadow text
• EXPLORER
  • example one
  • weft fonts
  • vertical align
• OPACITY
  • opaque colours
  • opaque menu
  • partial opacity
  • partial opacity II

 

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

二、三级dropdown弹出菜单

HTML代码

• DEMOS
  • zero dollars
  • wrapping text
  • styled form
  • active focus
  • HOVER/CLICK >
    • styled form
    • active focus
    • hover/click
  • shadow boxing
  • image map
  • fun backgrounds
  • fade scrolling
  • em sized images
• MENUS
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• LAYOUTS
  • Fixed 1
  • Fixed 2
  • Fixed 3
  • Fixed 4
  • minimum width
• BOXES
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• MOZILLA
  • drop down menu
  • cascading menu
  • content:
  • mozzie box
  • rainbow box
  • snooker cue
  • target practise
  • two tone headings
  • shadow text
• EXPLORER
  • example one
  • weft fonts
  • vertical align
• OPACITY
  • opaque colours
  • opaque menu
  • partial opacity
  • partial opacity II
  • • styled form
    • active focus
    • hover/click

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

三、flyout-竖向三级弹出菜单

HTML代码

• DEMOS
  • zero dollars
  • wrapping text
  • styled form
  • active focus
  • HOVER/CLICK >
    • styled form
    • active focus
    • hover/click
  • shadow boxing
  • image map
  • fun backgrounds
  • fade scrolling
  • em sized images
• MENUS
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• LAYOUTS
  • Fixed 1
  • Fixed 2
  • Fixed 3
  • Fixed 4
  • minimum width
• BOXES
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• MOZILLA
  • drop down menu
  • cascading menu
  • content:
  • mozzie box
  • rainbow box
  • snooker cue
  • target practise
  • two tone headings
  • shadow text
• EXPLORER
  • example one
  • weft fonts
  • vertical align
• OPACITY
  • opaque colours
  • opaque menu
  • partial opacity
  • partial opacity II

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

四、dropline-水平三级横向弹出菜单

HTML代码

• DEMOS
  • zero dollars
  • wrapping text
  • styled form
  • active focus
  • HOVER/CLICK
    • styled form
    • active focus
    • hover/click
  • shadow boxing
  • image map
• MENUS
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• LAYOUTS
  • Fixed 1
  • Fixed 2
  • Fixed 3
  • Fixed 4
  • minimum width
• BOXES
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• MOZILLA
  • drop down menu
  • cascading menu
  • content:
  • mozzie box
  • rainbow box
  • snooker cue
  • target practise
• EXPLORER
  • example one
  • weft fonts
  • vertical align
• OPACITY
  • opaque colours
  • opaque menu
  • partial opacity
  • partial opacity II
  • HOVER/CLICK
    • styled form
    • active focus
    • hover/click

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

五、upmenu-水平竖弹向上三级弹出菜单

HTML代码

 

 

 

 

 

 

 

 

 

• DEMOS
  • zero dollars
  • wrapping text
  • styled form
  • active focus
  • HOVER/CLICK >
    • styled form
    • active focus
    • hover/click
  • shadow boxing
  • image map
  • fun backgrounds
  • fade scrolling
  • em sized images
• MENUS
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• LAYOUTS
  • Fixed 1
  • Fixed 2
  • Fixed 3
  • Fixed 4
  • minimum width
• BOXES
  • spies menu
  • vertical menu
  • enlarging list
  • link images
  • non-rectangular
  • jigsaw links
  • circular links
• MOZILLA
  • drop down menu
  • cascading menu
  • content:
  • mozzie box
  • rainbow box
  • snooker cue
  • target practise
  • two tone headings
  • shadow text
• EXPLORER
  • example one
  • weft fonts
  • vertical align
• OPACITY
  • • styled form
    • active focus
    • hover/click
  • opaque colours
  • opaque menu
  • partial opacity
  • partial opacity II

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


相关文章：
· 效果直逼flash的Div+Css+Js菜单
· 可在线生成漂亮的Flash导航菜单的网站
· 发现两个很不错的下拉菜单! 
· 30余个CSS导航菜单效果