首页
所有分类
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 相关文章推荐
js给onclick事件赋值，动态传参数实例解说
Mar 28 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JavaScript bold方法入门实例（把指定文字显示为粗体）
Oct 17 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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
感谢信(72) 评语(336) 寄语(276) 决心书(42) 保证书(97) 计划书(118) 制度(225) 活动总结(790) 倡议书(159) 请假条(31)
You might like
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python自定义类并使用的方法
2015/05/07 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
英国领先的运动营养品牌：Protein Dynamix
2018/01/02 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
C#面试问题
2016/07/29 面试题
学校安全工作制度
2014/01/19 职场文书
5s推行计划书
2014/05/06 职场文书
员工团队活动方案
2014/08/28 职场文书
授权委托书（完整版）
2014/09/10 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android