首页
所有分类
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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
js的对象与函数详解
Jan 21 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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
A254(1) SRF-22W(1) 华普R-96(1) 德劲1107(1) 安健(1) 上海永华(1) YH-R296(1) GF515(1) SRF-M100(1) 德劲1102(1)
You might like
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue cli2.0单页面title修改方法
2018/06/07 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python中new方法的详解
2019/01/15 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
英国在线花园中心：You Garden
2018/06/03 全球购物
党的群众路线教育学习材料
2014/05/12 职场文书
搞笑车尾标语
2014/06/23 职场文书
学校教研活动总结
2014/07/02 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
学校标语口号大全
2015/12/26 职场文书
2019最新婚庆对联集锦！
2019/07/10 职场文书
k-means & DBSCAN 总结
2021/04/27 Python