仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1039|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 今天来学习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><!--IE6背景图片闪灼成绩--></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><!--position--></div><!--menusel--><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><!--position--></div><!--menusel--><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><!--position--></div><!--menusel--></div><!--menu--><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 | 只看该作者

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

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
透明 该用户已被删除
板凳
发表于 2015-1-18 18:27:59 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
只想知道 该用户已被删除
地板
发表于 2015-1-27 16:37:05 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
admin 该用户已被删除
5#
发表于 2015-2-5 14:30:00 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
金色的骷髅 该用户已被删除
6#
发表于 2015-2-12 06:52:55 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
因胸联盟 该用户已被删除
7#
发表于 2015-3-3 01:09:25 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
不帅 该用户已被删除
8#
发表于 2015-3-18 09:11:11 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 22:03

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表