教程集 > 脚本编程 > javascript > 正文 js下拉菜单代码（css div)

js下拉菜单代码（css div)

发布时间：2016-10-18 编辑：jiaochengji.com

教程集为您提供js下拉菜单代码（css div)等资源，欢迎您收藏本站，我们将为您提供最新的js下拉菜单代码（css div)资源

这是一款 js下拉菜单特效哦，利用css div js来实例的，导航菜单下拉效果代码

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><html> <head> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #menu { width: 860px; margin: 55px auto; font-size: 13px; border: 1px solid orange; overflow: hidden; } #tabMenu { background: orange; height: 30px; width: 870px; } #tabMenu li { float: left; line-height: 30px; width: 143px; background: #fdceff; margin-right: 1px; text-align: center; } #tabMenu .bgcaption { background: #fbb7fd; color: #fff; font-weight: bold; } #tabContent { width: 860px; position: relative; height: 100px; } #tabContent ul { background: #fbb7fd; width: 144px; position: absolute; top: 0; left: 0; } #tabContent .current { display: block; } #tabContent .normal { display: none; } </style> <script type="text/javascript"> function tabChange(num) { var tabMenulist = document.getElementById("tabMenu").getElementsByTagName("li"); var tabContentlist = document.getElementById("tabContent").getElementsByTagName("ul"); for (var i = 0; i < tabMenulist.length; i ) { tabMenulist[i].className = ""; tabContentlist[i].className = "normal"; } tabMenulist[num].className = "bgcaption"; tabContentlist[num].className = "current"; document.getElementById("list_" num).style.left = num * 144 "px"; } </script> </head> <body>

上一篇：javascript css 网页选项卡代码下一篇：js非常不错的通用滑动门菜单

[关闭]

浏览排行

~ ~

js下拉菜单代码（css div)

最近更新

浏览排行