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

所属分类：网络编程 / JavaScript 阅读数： 718

收藏 0赞 0分享

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

这一个也不错

<!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">   <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 全选注:引入外部Js需再刷新一下页面才能执行]

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

更多精彩内容其他人还在看

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

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

把vue-router和express项目部署到服务器的方法

Vue 2.5.2下axios + express 本地请求404的解决方法

vue和react等项目中更简单的实现展开收起更多等效果示例

vue webpack打包优化操作技巧

在vscode中统一vue编码风格的方法

vue+iview+less+echarts实战项目总结

深入理解ES6中let和闭包

浅谈用Webpack路径压缩图片上传尺寸获取的问题

webpack将js打包后的map文件详解

网络赚钱

站长故事