首页
所有分类
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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
海燕B411(1) 车机(1) 电子管(5) TECSUN(1) 再生机(1) 东方红(1) PL-365(1) 德生(17) 修复(2) 接收机(2)
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
原生js二级联动效果
2017/06/20 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
英国最受欢迎的平价女士时装零售商：Roman Originals
2019/11/02 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
逻辑链路控制协议
2016/10/01 面试题
工程资料员岗位职责
2014/03/10 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
优质服务演讲稿
2014/05/14 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
分享提高 Python 代码的可读性的技巧
2022/03/03 Python