js实现的二级横向菜单条实例
更新时间：2015年08月22日 15:23:23 作者：企鹅
这篇文章主要介绍了js实现的二级横向菜单条,是非常美观简洁的二级导航条效果,可实现针对鼠标事件的动态响应及页面样式切换功能,简单实用,需要的朋友可以参考下
本文实例讲述了js实现的二级横向菜单条。分享给大家供大家参考。具体如下：
这是一款十分清新的多级网页菜单，类似滑动门的操作风格，鼠标放上后，相应的二级菜单会显示出来，我觉得挺漂亮的，适合许多网站使用，不相信么？点击“运行代码”看效果吧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-2row-nav-menu-codes/
具体代码如下：
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了详解微信小程序审核不通过的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章给大家分享一段实例代码，主要介绍js查看一个函数的执行时间，代码简单易懂，感兴趣的朋友一起跟着小编来学习学习吧2015-09-09
数字添加逗号的方法有很多，在本将为大家介绍下使用js来实现，具体如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。为了解决大家的疑惑，本文将详细介绍JS内存空间2021-06-06
这篇文章主要介绍了JS继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家带来一篇删除table表格行的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
百度前台js笔试题与答案...2007-09-09
这篇文章主要为大家详细介绍了JavaScript实现简单购物小表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文主要介绍了JS逆向之webpack打包站点实战原理分享，webpack是前端程序员用来进行打包JS的技术，打包之后的代码特征非常明显，更多相关知识需要的小伙伴可以参考下面文章详细内容2022-06-06
javascript中的parseInt和parseFloat区别
这篇文章用简单的小例子演示了parseInt和parseFloat区别，有需要的朋友可以参考一下2013-07-07
最新评论