今天来学习CSS+JS完成兼容性很好的无穷级下拉菜单

只看该作者 · 发表于 2015-1-16 10:37:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

说实话，我并不是反对div+CSS，但物生一利，必生一弊，div+css的利处大家说了很多，我就说说狂热的追求div+css的几个弊端：

再发一个关于多级下拉菜单的实例，在IE8下测试没成绩，其他没测，请测试后决意是不是利用。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head><title>CSS+JS完成兼容性很好的无穷级下拉菜单</title><styletype="text/css">*{margin:0;padding:0;border:0;}body{font:12px/130%verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}a:link{color:#000;text-decoration:none;}a:visited{color:#000;text-decoration:none;}a:hover{color:#000;text-decoration:none;}.menu{width:778px;height:26px;background:#fff;margin:0auto;}.menusel{float:left;width:100px;position:relative;height:25px;background:#ddd;line-height:25px;margin-left:1px;*margin-left:0px;_margin-left:-1px;}.menuselh2{font-size:12px;}.menusela{display:block;text-align:center;width:100px;border:1pxsolid#a4a4a4;height:25px;border-bottom:1pxsolid#a4a4a4;position:relative;z-index:2;}.menusela:hover{border:1pxsolid#a4a4a4;border-bottom:1pxdashed#eeeeee;position:relative;z-index:2;height:25px;}.ahovera{border-bottom:1pxdashed#eeeeee;background:#eeeeee;}.position{position:absolute;z-index:1;}.menuselul{width:125px;background:#eee;border:1pxsolid#a4a4a4;margin-top:-1px;position:relative;z-index:1;display:none;}.menusel.block{display:block;}.typeulli{border-bottom:1pxdashed#a4a4a4;width:125px;position:relative;float:left;}.typeullia{border:none;width:125px;}.typeullia:hover{border:none;background:#ddd;}.typeul{margin-left:0;}.typeulul{left:125px;top:0;position:absolute;}.fli{margin-left:-1px;border-left:#eeeeeesolid1px;}.menusel.lli{border:none;}</style><scripttype="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script></head><body><divclass="menu"><divid="menu1"class="menusel"><h2><ahref="/">菜单1</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="http://www.33567.cn">菜单选项1-2</a></li><li><ahref="#">菜单选项1-2</a><ul><liclass="fli"><ahref="#">菜单选项1-2-1</a></li><liclass="lli"><ahref="#">菜单选项1-2-2</a></li></ul></li><li><ahref="http://www.7caidy.com">菜单选项1-2</a></li><liclass="lli"><ahref="#">菜单选项1-2</a></li></ul></div></div><divid="menu2"class="menusel"><h2><ahref="#">菜单2</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="#">菜单选项2-2</a></li><li><ahref="#">菜单选项2-2</a><ul><liclass="fli"><ahref="#">菜单选项2-2-1</a></li><liclass="lli"><ahref="#">菜单选项2-2-2</a><ul><liclass="fli"><ahref="#">菜单选项2-2-1</a></li><liclass="lli"><ahref="#">菜单选项2-2-2</a></li></ul></li></ul></li><li><ahref="#">菜单选项2-2</a></li><liclass="lli"><ahref="#">菜单选项2-2</a></li></ul></div></div><divid="menu3"class="menusel"><h2><ahref="#">菜单3</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="#">菜单选项3-2</a></li><li><ahref="#">菜单选项3-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a></li></ul></li></ul></li></ul></li><li><ahref="#">菜单选项3-2</a></li><liclass="lli"><ahref="#">菜单选项3-2</a></li></ul></div></div></div><scripttype="text/javascript">for(varx=1;x<4;x++){varmenuid=document.getElementById("menu"+x);menuid.num=x;type();}functiontype(){varmenuh2=menuid.getElementsByTagName("h2");varmenuul=menuid.getElementsByTagName("ul");varmenuli=menuul[0].getElementsByTagName("li");menuh2[0].onmou搜索引擎优化ver=show;menuh2[0].onmou搜索引擎优化ut=unshow;menuul[0].onmou搜索引擎优化ver=show;menuul[0].onmou搜索引擎优化ut=unshow;functionshow(){menuul[0].className="clearfixtypeulblock"}functionunshow(){menuul[0].className="typeul"}for(vari=0;i<menuli.length;i++){menuli.num=i;varliul=menuli.getElementsByTagName("ul")[0];if(liul){typeshow()}}functiontypeshow(){menuli.onmou搜索引擎优化ver=showul;menuli.onmou搜索引擎优化ut=unshowul;}functionshowul(){menuli[this.num].getElementsByTagName("ul")[0].className="block";}functionunshowul(){menuli[this.num].getElementsByTagName("ul")[0].className="";}}</script></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
大大增加了开发时间，同时也增加了开发成本。当然如果你是一个熟手，或者可以白天黑夜都加班而不用担心没有加班费，那可能不会。

只看该作者 · 发表于 2015-1-16 15:53:51

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-1-18 18:27:59

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-1-27 16:37:05

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-5 14:30:00

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-2-12 06:52:55

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-3 01:09:25

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-18 09:11:11

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习CSS+JS完成兼容性很好的无穷级下拉菜单

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

今天来学习CSS+JS完成兼容性很好的无穷级下拉菜单