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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-2row-nav-menu-codes/

具体代码如下：

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%;
}





 
 

 
网站首页 
 
JS代码 
 
电子商务 
 
脚本下载 
 
建站技巧 
 
CSS技巧 
 
CSS导航菜单 
 
菜单特效 
 
SEO优化 
 

 
 
  

  
脚本下载-中小企业菜单特效专家 
  
网站公告：脚本下载欢迎您~ 
  
  

  
脚本下载 
  
脚本下载 
  
脚本下载 
  
脚本下载 
  
网页特效 
  

  
脚本下载 
  
脚本下载 
  
菜单特效 
  
菜单特效 
  
菜单特效 
  
网页特效 
  

  
脚本下载 
  
网页特效 
  
菜单特效 
  
菜单特效 
  

  
脚本下载 
  
服务器租用 
  
菜单特效 
  
超级机房 
  
脚本下载 
  

  
脚本下载 
  
脚本下载 
  
脚本下载 
  
脚本下载 
  

  
脚本下载 
  
脚本下载 
  
脚本下载 
  
个人建站 
  
门户建站 
  

  
脚本下载 
  
菜单特效 
  
菜单特效 
  

  
脚本下载 
  
菜单特效 
  
菜单特效 
  
菜单特效 
 
 

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