首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现的黑背景灰色二级导航菜单效果代码

Posted in Javascript onAugust 24, 2015

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微软雅黑字体，若不想用这种字体，可换成默认的宋体即可。

运行效果截图如下：

js实现的黑背景灰色二级导航菜单效果代码

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<TITLE>兼容IE6、firefox的灰色横向二极导航菜单代码</TITLE>
<style type=text/css>
BODY { background:#26272b;}
a{ color:#FFFFFF}
UL {LIST-STYLE-TYPE: none;padding:0px;margin:0px;}
LI {FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微软雅黑", Arial, Verdana;}
.hide {DISPLAY: none}
#mainmenu_top{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
#mainmenu_top UL{}
#mainmenu_top UL LI {FLOAT: left;}
#mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
#mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
#mainmenu_bottom UL LI A:hover {text-decoration: underline;}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//获取id的函数
{
 if(document.getElementById && document.getElementById(objectId)) {
 // W3C DOM
 return document.getElementById(objectId);
 } else if (document.all && document.all(objectId)) {
 // MSIE 4 DOM
 return document.all(objectId);
 } else if (document.layers && document.layers[objectId]) {
 // NN 4 DOM.. note: this won't find nested layers
 return document.layers[objectId];
 } else {
 return false;
 }
}
function SetTimer()//主导航时间延迟的函数
{
 for(j=1; j <10; j++){
 if (j == number){
 if(getObject("mm"+j)!=false){
  getObject("mm"+ number).className = "menuhover";
  getObject("mb"+ number).className = "";
 }
 }
 else{
  if(getObject("mm"+j)!=false){
  getObject("mm"+ j).className = "";
  getObject("mb"+ j).className = "hide";
 }
 }
 }
}
function CheckTime()//设置时间延迟后
{
 secondLeft--;
 if ( secondLeft == 0 )
 {
 clearInterval(timer);
 SetTimer();
 }
}
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
{
 number = Num;
 sourceObj = thisobj;
 secondLeft = 1;
 timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
{
 clearInterval(timer);
}
</SCRIPT>
<!--导航开始-->
<DIV id=mainmenu_body>
<!--主导航开始-->
 <DIV id=mainmenu_top>
 <div class="menu-lft"><div class="menu-rht">
 <UL>
 <LI class="home"><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI>
 <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI>
 <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI>
 <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>脚本下载</A> </LI>
 <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
 <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
 <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI>
 <LI><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>网络营销</A> </LI>
 <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
 </DIV></DIV>
 </DIV>
<!--子导航导航开始-->
 <DIV id=mainmenu_bottom>
 <UL class=hide id=mb1>
 <LI><A href="#">2012年元旦网站推广惊喜促销价</A> </LI>
 <LI><A href="#">网站公告：三水点靠木7年了</A> </LI> </UL>
 <UL class=hide id=mb2>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
 <UL class=hide id=mb3>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
 <UL class=hide id=mb4>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>网页特效</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
 <UL class=hide id=mb5>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>服务器租用首页</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>超级机房</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI></UL>
 <UL class=hide id=mb6>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>脚本下载</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI></UL>
 <UL class=hide id=mb7>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>个人建站</A> </LI>
 <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
 <UL class=hide id=mb8 style="DISPLAY: none">
 <LI><A href="#" target=_parent>三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
 <UL class=hide id=mb9>
 <LI><A href="#">三水点靠木</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网页特效</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI>
 <LI><A href="#" target=_parent>网络营销</A> </LI></UL>
<script>
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" ); 
thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; 
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)
 if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
 {
  getObject("mm1").className="menuhover"
  getObject("mb1").className = "";
 }
 else if(thisUPage_s=="domain")
 {
  getObject("mm2").className="menuhover"
  getObject("mb2").className = "";
 }
 else if(thisUPage_s=="hosting")
 {
  getObject("mm3").className="menuhover"
  getObject("mb3").className = "";
 } 
 else if(thisUPage_s=="mail")
 {
  getObject("mm4").className="menuhover"
  getObject("mb4").className = "";
 }
 else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
  getObject("mm5").className="menuhover"
  getObject("mb5").className = "";
 }
 else if(thisUPage_s=="promotion"){
  getObject("mm6").className="menuhover"
  getObject("mb6").className = "";
 }
 else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
  getObject("mm7").className="menuhover"
  getObject("mb7").className = "";
 }
 else if(thisUPage_s=="benefit"){
  getObject("mm8").className="menuhover"
  getObject("mb8").className = "";
 }
 else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
  getObject("mm9").className="menuhover"
  getObject("mb9").className = "";
 }
 else
 {
  getObject("mm1").className="";
  getObject("mb1").className = "";
 }
}
window.load=mmenuURL()
</script>
</DIV>
</DIV>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

js实现的黑背景灰色二级导航菜单效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
js 对联广告、漂浮广告封装类（IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
Jul 13 Javascript
three.js实现圆柱体
Dec 30 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 #Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 #Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
Ruby面试题(15) 求职信(1029) 自荐信(981) J2EE面试题(19) UNIX面试题(27) 自我评价(886) 自我鉴定(671) Delphi面试题(13) Servlet面试题(20) SOA面试题(9)
You might like
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
js中编码函数：escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python list语法学习（带例子）
2013/11/01 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python中的asyncio代码详解
2019/06/10 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
美国庭院家具购物网站：AlphaMarts
2019/04/10 全球购物
OSPF有什么优点？为什么OSPF比RIP收敛快？
2013/02/13 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
golang使用map实现去除重复数组
2022/04/14 Golang