首页
所有分类
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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 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
Mysql8(2) celery(1) SeaTable(1) Outlook(1) tree shaking(1) 黑屏(2) MutationObserver(1) appdata(1) Three.js(1) OOP(1)
You might like
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
smarty简单分页的实现方法
2014/10/27 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
深入理解JavaScript系列（50）：Function模式（下篇）
2015/03/04 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
对numpy.append()里的axis的用法详解
2018/06/28 Python
Flask Web开发入门之文件上传（八）
2018/08/17 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
容易被忽略的Python内置类型
2020/09/03 Python
骆驼官方商城：CAMEL
2016/11/22 全球购物
纽约海：Sea New York
2018/11/04 全球购物
小学生自我鉴定
2013/10/12 职场文书
毕业生求职的求职信
2013/12/05 职场文书
期末学生评语大全
2014/04/24 职场文书
小学生自我评价100字（15篇）
2014/09/18 职场文书
管辖权异议上诉状
2015/05/23 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers