搜集了几个不错的下拉菜单效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 搜集了几个不错的下拉菜单效果

技术文章搜索

关键字

Javascript 中的搜集了几个不错的下拉菜单效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 112 ::

收藏到网摘: n/a

几行代码轻松搞定jquery实现flash8类似的连接效果无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这一个也不错

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>THE ULTIMATE CSS ONLY DROPDOWN MENU</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type=text/css>
.menu { FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative
}
.menu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menu UL LI { FLOAT: left; POSITION: relative
}
.menu UL LI A { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none
}
.menu UL LI A:visited { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none
}
* HTML .menu UL LI A { WIDTH: 139px
}
.menu UL LI A:visited { WIDTH: 139px
}
.menu UL LI UL { DISPLAY: none
}
TABLE { FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse
}
.menu UL LI:hover A { BACKGROUND: #bd8d5e; COLOR: #fff
}
.menu UL LI:hover UL { MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em
}
.menu UL LI:hover UL LI UL { DISPLAY: none
}
.menu UL LI:hover UL LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto
}
.menu UL LI:hover UL LI A.drop { BACKGROUND: url(drop.png) #c9c9a7 no-repeat right bottom
}
.menu UL LI:hover UL LI A:hover { BACKGROUND: #c9c9a7; COLOR: #000
}
.menu UL LI:hover UL LI:hover UL { DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px
}
.menu UL LI:hover UL LI:hover UL.left { LEFT: -150px
}
</style>
<META content="MSHTML 6.00.6000.16441" name=GENERATOR></HEAD>
<BODY>
<DIV class=menu>
<UL> <LI><A class=drop href="http://www.jluvip.com/works/css/menu/index.html">DEMOS</A> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="The zero dollar ads page" href="http://www.jluvip.com/works/css/menu/zero_dollars.html">zero dollars advertising page</A> </LI> <LI><A title="Wrapping text around images" href="http://www.jluvip.com/works/css/menu/embed.html">wrapping text around images</A> </LI> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">active focus</A> </LI> <LI><A class=drop title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click with no borders</A> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing active/focus borders</A> </LI> <LI><A title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</A> </LI></UL></TD></TR></TBODY></TABLE></LI> <LI class=upone><A title="Multi-position drop shadow" href="http://www.jluvip.com/works/css/menu/shadow_boxing.html">shadow boxing</A> </LI> <LI><A title="Image Map for detailed information" href="http://www.jluvip.com/works/css/menu/old_master.html">image map for detailed information</A> </LI> <LI><A title="fun with background images" href="http://www.jluvip.com/works/css/menu/bodies.html">fun with background images</A> </LI> <LI><A title="fade-out scrolling" href="http://www.jluvip.com/works/css/menu/fade_scroll.html">fade scrolling</A> </LI> <LI><A title="em size images compared" href="http://www.jluvip.com/works/css/menu/em_images.html">em image sizes compared</A> </LI></UL></TD></TR></TBODY></TABLE></LI> <LI><A href="http://www.jluvip.com/works/css/boxes/index.html">BOXES <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="a coded list of spies" href="http://www.jluvip.com/works/css/dropmenu/spies.html">a coded list of spies</A> </LI> <LI><A title="a horizontal vertical menu" href="http://www.jluvip.com/works/css/dropmenu/vertical.html">vertical menu</A> </LI> <LI><A title="an enlarging unordered list" href="http://www.jluvip.com/works/css/dropmenu/expand.html">enlarging unordered list</A> </LI> <LI><A title="an unordered list with link images" href="http://www.jluvip.com/works/css/dropmenu/enlarge.html">link images</A> </LI> <LI><A title="non-rectangular links" href="http://www.jluvip.com/works/css/dropmenu/cross.html">non-rectangular</A> </LI> <LI><A title="jigsaw links" href="http://www.jluvip.com/works/css/dropmenu/jigsaw.html">jigsaw links</A> </LI> <LI><A title="circular links" href="http://www.jluvip.com/works/css/dropmenu/circles.html">circular links</A> </LI></UL></TD></TR></TBODY></TABLE></LI> <LI><A href="http://www.jluvip.com/works/css/mozilla/index.html">MOZILLA</A> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="A drop down menu" href="http://www.jluvip.com/works/css/mozilla/dropdown.html">drop down menu</A> </LI> <LI><A title="A cascading menu" href="http://www.jluvip.com/works/css/mozilla/cascade.html">cascading menu</A> </LI> <LI><A title="Using content:" href="http://www.jluvip.com/works/css/mozilla/content.html">content:</A> </LI> <LI><A title=":hover applied to a div" href="http://www.jluvip.com/works/css/mozilla/moxbox.html">mozzie box</A> </LI> <LI><A title="I can build a rainbow" href="http://www.jluvip.com/works/css/mozilla/rainbow.html">I can build a rainbow with transparent borders</A> </LI> <LI><A title="Snooker cue" href="http://www.jluvip.com/works/css/mozilla/snooker.html">a snooker cue using border art</A> </LI> <LI><A title="Target Practise" href="http://www.jluvip.com/works/css/mozilla/target.html">target practise</A> </LI> <LI><A title="Two tone headings" href="http://www.jluvip.com/works/css/mozilla/splittext.html">two tone headings</A> </LI> <LI><A title="Shadow text" href="http://www.jluvip.com/works/css/mozilla/shadow_text.html">shadow text</A> </LI></UL></TD></TR></TBODY></TABLE></LI> <LI><A href="http://www.jluvip.com/works/css/ie/index.html">EXPLORER</A> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="Example one" href="http://www.jluvip.com/works/css/ie/exampleone.html">the first example for Internet Explorer</A> </LI> <LI><A title="Weft fonts" href="http://www.jluvip.com/works/css/ie/weft.html">weft fonts</A> </LI> <LI><A title="Vertical align" href="http://www.jluvip.com/works/css/ie/exampletwo.html">vertically aligning text</A> </LI></UL></TD></TR></TBODY></TABLE></LI> <LI><A href="http://www.jluvip.com/works/css/opacity/index.html">OPACITY</A> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="colour wheel" href="http://www.jluvip.com/works/css/opacity/colours.html">a colour wheel using opaque colours</A> </LI> <LI><A title="a menu using opacity" href="http://www.jluvip.com/works/css/opacity/picturemenu.html">a menu using opacity</A> </LI> <LI><A title="partial opacity" href="http://www.jluvip.com/works/css/opacity/png.html">partial opacity</A> </LI> <LI><A title="partial opacity II" href="http://www.jluvip.com/works/css/opacity/png2.html">partial opacity II</A> </LI> <LI><A class=drop title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">HOVER/CLICK</A> <TABLE> <TBODY> <TR> <TD> <UL class=left> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing active/focus borders</A> </LI> <LI><A title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</A> </LI></UL></TD></TR></TBODY></TABLE></LI></UL></TD></TR></TBODY></TABLE></LI></UL></DIV></BODY></HTML>

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

http://www.jluvip.com/works/css/dropmenu/dropmenu.html

几行代码轻松搞定jquery实现flash8类似的连接效果无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee

Javascript 中的 搜集了几个不错的下拉菜单效果

评论 (0) All

Javascript 中的搜集了几个不错的下拉菜单效果