本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下:
这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/
具体代码如下:
<html> <head> <title>简易实用,滑动门</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> *{margin:0;padding:0;} a:link,a:visited{text-decoration:none;} a:hover{text-decoration:none;} ul{list-style:none;} .subMenu{background:#333;float:left;padding-top:2px;width:100%;} .subMenu li{float:left;} .subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;} .subMenu .thisStyle a {background:#fff;color:#000;} .subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;} .subContent ul{display:none;padding:15px;line-height:180%;} </style> </head> <body> <ul class="subMenu"> <li class="thisStyle"><a href="javascript:void(0)">目录</a></li> <li><a href="javascript:void(0)">列表</a></li> <li><a href="javascript:void(0)">产品</a></li> <li><a href="javascript:void(0)">新网</a></li> </ul> <div class="subContent"> <ul style="display:block;"> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> <li><a href="#">111111</a></li> </ul> <ul> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> <li><a href="#">222222</a></li> </ul> <ul> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> <li><a href="#">333333</a></li> </ul> <ul> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> <li><a href="#">444444</a></li> </ul> </div> <script> function $_class(name){ var elements = document.getElementsByTagName("*"); for(s=0;s<elements.length;s++){ if(elements[s].className==name){ return elements[s]; } } } //tab effects var tabList = $_class("subMenu").getElementsByTagName("li") tabCon = $_class("subContent").getElementsByTagName("ul"); for(i=0;i<tabList.length;i++){ (function(){ var t = i; tabList[t].onmouseover = function(){ for(o=0;o<tabCon.length;o++){ tabCon[o].style.display = "none"; tabList[o].className = ""; if(t==o){ this.className = "thisStyle"; tabCon[o].style.display = "block"; } } } })() } </script> </bdoy> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 群星《顶级发烧大碟 蒙面歌王争霸战 2CD》[WAV/分轨][1.3GB]
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】
- 群星.1993-烧得厉害VOL.1好戏好歌唱不停【滚石】【WAV+CUE】
- 魔兽世界wlk阿奴巴拉克怎么打 wlk阿奴巴拉克机制与打法
- 归龙潮阿律的笛子位置在哪 阿律的笛子图文位置一览
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-9
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 《黑神话》纪录片9月20日上线!揭秘关卡为何删减
- 游戏科学估值已和育碧市值相当:后者有两万多名员工
- 黑神话第81周目Boss伤害有多恐怖?起手伤害直接秒
- 群星.2009-原班情歌2CD【SONY】【WAV+CUE】
- 群星.2024-长乐曲电视剧原声带【TME影音】【FLAC分轨】