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

js实现的二级横向菜单条实例

Posted in Javascript onAugust 22, 2015

本文实例讲述了js实现的二级横向菜单条。分享给大家供大家参考。具体如下：

这是一款十分清新的多级网页菜单，类似滑动门的操作风格，鼠标放上后，相应的二级菜单会显示出来，我觉得挺漂亮的，适合许多网站使用，不相信么？点击“运行代码”看效果吧。

运行效果截图如下：

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">
<TITLE>蓝色二级横向滑动导航菜单</TITLE>
<style type=text/css>
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 UL LI .menuhover {
 BACKGROUND: url(images/mainmenu_s.gif) no-repeat;
 COLOR: #fff;
}
#mainmenu_top UL LI A {
 MARGIN-TOP: 2px;
 CURSOR: pointer;
 PADDING-TOP: 8px;
 HEIGHT: 20px;
 text-decoration: none;
}
#mainmenu_top {
 width:100%;
 HEIGHT: 28px;
 display:block;
 overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
 WIDTH: 81px;
 height:auto;
 DISPLAY: block;
 COLOR: #666666;
 TEXT-ALIGN: center;
 BACKGROUND: url(images/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
 width:100%;
 height:32px;
 line-height:32px;
 display:block;
 overflow:hidden;
 BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
 HEIGHT: 32px;
 COLOR: #fff;
 MARGIN-LEFT: 0px;
 PADDING: 0px 0px 0px 5px;
 BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
 PADDING-LEFT: 8px;
 FLOAT: left;
 MARGIN-LEFT: 7px;
 HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
 FLOAT: left;
 MARGIN-LEFT: 7px;
 HEIGHT: 32px;
 PADDING-LEFT: 8px;
 BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
 COLOR: #fff;
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px;
 DISPLAY: block;
 text-decoration: none;
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
 color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
 COLOR: #fff;
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px;
 DISPLAY: block;
 BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;
}
</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);
 } 
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小写
 if(thisUPage_s=="#"||thisUPage_s=="#"||thisUPage_s=="#")
 {
  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 id=mainmenu_body>
<!--主导航开始-->
 <DIV id=mainmenu_top>
 <UL>
 <LI><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 style="DISPLAY: none"><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 id=mainmenu_bottom>
 <DIV class=mainmenu_rbg>
  <UL class=hide id=mb1>
  <LI><A href="#">脚本下载-中小企业菜单特效专家</A> </LI>
  <LI><A href="#">网站公告：脚本下载欢迎您~</A> </LI>
  </UL>
  <UL class=hide id=mb2>
  <LI style="DISPLAY: none"><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 style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 7px"><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 style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 80px"><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 style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 80px"><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 style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 160px"><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 style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 180px"><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 style="MARGIN-LEFT: 270px"><A href="/agent/" 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 style="MARGIN-LEFT: 180px"><A href="/agent/">脚本下载</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
 </DIV>
 </DIV>
</DIV>
</body>
</html>

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

js实现的二级横向菜单条实例

- Author -

企鹅

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

Javascript 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
javascrip关于继承的小例子
May 10 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
JavaScript加入收藏夹功能（兼容IE、firefox、chrome）
May 05 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 #Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 #Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 #Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 #Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
数据类型(8) 虚拟机(3) RabbitMQ(3) Geospatial(1) 入门基础(1) XML(1) Hash(1) html5+(1) Vmware(3) 触发器(3)
You might like
CURL状态码列表(详细)
2013/06/27 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
phpStudy 2016 使用教程详解（支持PHP7）
2017/10/18 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jquery.combobox中文api和例子，修复了上面的小bug
2011/03/28 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
JS重载实现方法分析
2016/12/16 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
试述DBMS的主要功能
2016/11/13 面试题
酒店管理求职信范文
2014/04/06 职场文书
宿舍管理制度范本
2015/08/07 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
80后创业总结的9条职场用人思想，记得收藏
2019/08/13 职场文书