两个横向菜单栏示例

最新推荐文章于 2024-04-10 23:45:11 发布

weixin_33738555

最新推荐文章于 2024-04-10 23:45:11 发布

阅读量142

点赞数

文章标签： xhtml javascript ViewUI

菜单栏示例一：

菜单源代码

<! 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" >
< head >
     < script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ script >
     < script type ="text/javascript" >
        $( function () {
            $( " #container .menu1 ul li " ).click( function () {
                 var index = $( " #container .menu1 ul li " ).index( this );
                $( this ).addClass( " bg " ).siblings().removeClass();
                $( " #container .menu2 ul li ul " ).eq(index).show().parent().siblings( " li " ).children( " ul " ).hide();
            })
        })
     </ script >

     < style type ="text/css" >
        body
         {
            margin : 0 ;
            padding : 0 ;
            font-family : "宋体" ;
            font-size : 9pt ;
            color : #FFFFFF ;
            font-weight : bold ;
         }
        #container
         {
            width : 100% ;    /* 1200px; */
            height : auto ;
            margin : 0 auto ;
             /* border: 1px #1025c0 solid; */

             /* xugang  2011.10.19 */
             /* margin: 0; */
            padding : 0px ;
            font-family : "宋体" ;
            font-size : 9pt ;
            color : #FFFFFF ;
            font-weight : bold ;
         }
        #container .menu1
         {
            width : 684px ;
            height : 34px ;
            border : none ;
            background : url(sadasd_09.png) no-repeat ;
             /* background: url(http://www.webdm.cn/images/20101213/2/menu1.gif) no-repeat;
            background-color: #1B5582; */
         }
        #container .menu1 ul
         {
            margin : 0 ;
             /* padding: 0; */
            padding-left : 0px ;
            padding-right : 0px ;
            padding-bottom : 0px ;
            padding-top : 4px ;
            position : relative ;

            margin-left : 4px ;    /* xugang 一级菜单选择项样式 */
         }
        #container .menu1 ul li
         { /* border: 1px #1025c0 solid;  测试 */
            float : left ;
            height : 25px ;
            width : 110px ;
            line-height : 25px ;
            list-style : none ;
            text-align : center ;
            cursor : pointer ;
             /* color: #fffff; */
            padding-left : 2px ;    /* xugang 一级菜单选择项 */
             /* margin-left: 1px;    xugang 一级菜单选择项  容易使一级菜单动态向右移动 */
         }
        #container .menu2
         {
            width : 100% ;    /* 1000px; */
            height : 25px ;
            border : none ;
            color : #000000 ;
            font-weight : normal ;
            background-color : #C9DEFA ;     /* #DFF0FF 子菜单颜色 */
            padding-left : 0px ;    /* xugang */
            padding-top : 0px ;    /* xugang */
            margin-left : 0px ;    /* xugang */
         }
        #container .menu2 ul
         {
            margin : 0 ;    /* xugang 原始  margin: 0; */
            padding : 0 ;
         }
        #container .menu2 ul li
         {
            height : 30px ;
            line-height : 30px ;
            list-style : none ;
            float : left ;
            cursor : pointer ;
         }
        #container .menu2 ul li ul li
         {     /* border: 1px #1025c0 solid;  测试 */
            float : left ;
            padding-top : 0px ;
            padding-bottom : 0px ;
            padding-left : 40px ;
            padding-right : 30px ; /* xugang */
            height : 25px ;
            line-height : 25px ;
            list-style : none ;
         }
        .bg
         {
            font-size : 12pt ;
             /* font-weight: normal; */
             /* text-decoration: underline;  blink */
            background-color : #1B5582 ; /* #1B5582 一级菜单选择项背景 */
         }
        .hide
         {
            display : none ;
         }
        .menu_a1 { display : block ; color : #ffffff ; text-decoration : none !important ; }
        .menu_a2 { display : block ; color : #000000 ; text-decoration : none !important ; }
     </ style >
</ head >
< body >
     < div id ="container" >
         < div class ="menu1" >
             < ul >
                 < li class ="bg" >< a href ="#" class ="menu_a1" >第一栏 </ a ></ li >
                 < li >< a href ="#" class ="menu_a1" >第二栏 </ a ></ li >
                 < li >< a href ="#" class ="menu_a1" >第三栏 </ a ></ li >
                 < li >< a href ="#" class ="menu_a1" >第四栏 </ a ></ li >
                 < li >< a href ="#" class ="menu_a1" >第五栏 </ a ></ li >
                 < li >< a href ="#" class ="menu_a1" >第六栏 </ a ></ li >
             </ ul >
         </ div >
         < div class ="menu2" >
             < ul >
                 < li >
                     < ul >
                         < li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
                         < li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
                         < li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
                     </ ul >
                 </ li >
                 < li >
                     < ul class ="hide" >
                         < li >第二栏 </ li >< li >第二栏 </ li >< li >第二栏 </ li >
                     </ ul >
                 </ li >
                 < li >
                     < ul class ="hide" >
                         < li >第三栏 </ li >< li >第三栏 </ li >< li >第三栏 </ li >
                     </ ul >
                 </ li >
                 < li >
                     < ul class ="hide" >
                         < li >第四栏 </ li >< li >第四栏 </ li >< li >第四栏 </ li >
                     </ ul >
                 </ li >
                 < li >
                     < ul class ="hide" >
                         < li >第五栏 </ li >< li >第五栏 </ li >< li >第五栏 </ li >
                     </ ul >
                 </ li >
                  < li >
                     < ul class ="hide" >
                         < li >第六栏 </ li >< li >第六栏 </ li >< li >第六栏 </ li >
                     </ ul >
                 </ li >
             </ ul >
         </ div >
     </ div >
     < div style ="width:400px; height:300px; background-color:red;" ></ div >
     < br />

</ body >
</ html >

<!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"> <head> <style type="text/css"> body { margin: 0; padding: 0; font-family: "宋体"; font-size: 9pt; color: #FFFFFF; font-weight: bold; } #container { width: 100%; /* 1200px; */ height: auto; margin: 0 auto; /* border: 1px #1025c0 solid; */ /* xugang 2011.10.19 */ /* margin: 0; */ padding: 0px; font-family: "宋体"; font-size: 9pt; color: #FFFFFF; font-weight: bold; } #container .menu1 { width: 684px; height: 34px; border: none; background: url(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat; /*background: url(http://www.webdm.cn/images/20101213/2/menu1.gif) no-repeat; background-color: #1B5582;*/ } #container .menu1 ul { margin: 0; /* padding: 0; */ padding-left: 0px; padding-right: 0px; padding-bottom: 0px; padding-top: 4px; position: relative; margin-left: 4px; /* xugang 一级菜单选择项样式 */ } #container .menu1 ul li { /*border: 1px #1025c0 solid; 测试 */ float: left; height: 25px; width: 110px; line-height: 25px; list-style: none; text-align: center; cursor: pointer; /* color: #fffff; */ padding-left: 2px; /* xugang 一级菜单选择项 */ /* margin-left: 1px; xugang 一级菜单选择项容易使一级菜单动态向右移动 */ } #container .menu2 { width: 100%; /* 1000px; */ height: 25px; border: none; color: #000000; font-weight: normal; background-color: #C9DEFA; /* #DFF0FF 子菜单颜色 */ padding-left: 0px; /* xugang */ padding-top: 0px; /* xugang */ margin-left: 0px; /* xugang */ } #container .menu2 ul { margin: 0; /* xugang 原始 margin: 0; */ padding: 0; } #container .menu2 ul li { height: 30px; line-height: 30px; list-style: none; float: left; cursor: pointer; } #container .menu2 ul li ul li { /* border: 1px #1025c0 solid; 测试 */ float: left; padding-top: 0px; padding-bottom: 0px; padding-left: 40px; padding-right: 30px; /* xugang */ height: 25px; line-height: 25px; list-style: none; } .bg { font-size: 12pt; /* font-weight: normal;*/ /* text-decoration: underline; blink */ background-color: #1B5582; /* #1B5582 一级菜单选择项背景 */ } .hide { display: none; } .menu_a1{ display: block; color:#ffffff; text-decoration:none !important; } .menu_a2{ display: block; color:#000000; text-decoration:none !important; } </style> </head> <body> <div id="container"> <div class="menu1"> <ul> <li class="bg"><a href="#" class="menu_a1">第一栏</a></li> <li><a href="#" class="menu_a1">第二栏</a></li> <li><a href="#" class="menu_a1">第三栏</a></li> <li><a href="#" class="menu_a1">第四栏</a></li> <li><a href="#" class="menu_a1">第五栏</a></li> <li><a href="#" class="menu_a1">第六栏</a></li> </ul> </div> <div class="menu2"> <ul> <li> <ul> <li><a href="#" class="menu_a2">第一栏</a></li> <li><a href="#" class="menu_a2">第一栏</a></li> <li><a href="#" class="menu_a2">第一栏</a></li> </ul> </li> <li> <ul class="hide"> <li>第二栏</li><li>第二栏</li><li>第二栏</li> </ul> </li> <li> <ul class="hide"> <li>第三栏</li><li>第三栏</li><li>第三栏</li> </ul> </li> <li> <ul class="hide"> <li>第四栏</li><li>第四栏</li><li>第四栏</li> </ul> </li> <li> <ul class="hide"> <li>第五栏</li><li>第五栏</li><li>第五栏</li> </ul> </li> <li> <ul class="hide"> <li>第六栏</li><li>第六栏</li><li>第六栏</li> </ul> </li> </ul> </div> </div> <div style="width:400px; height:300px; background-color:red;"></div> <br /> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

菜单栏示例二：

菜单源代码

< html >
< head profile ="http://gmpg.org/xfn/11" >
< title >黄页地区列表 </ title >
< style type ="text/css" >
body { background : #ccc ; color : #000 ; font : normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体" ; text-align : center ; }
.nav { position : relative ; background : url(nav_bg.png) no-repeat 0 -36px ; width : 960px ; height : 36px ; }
.navinner { background : url(nav_bg.png) no-repeat 100% -72px ; }
.navlist { height : 36px ; line-height : 36px ; overflow : hidden ; margin : 0 10px ; background : url(nav_bg.png) repeat-x 0 0 ; }
.nav li { float : left ; display : inline ; margin : 0 0 0 -2px ; padding : 0 4px 0 6px ; background : url(nav_bg.png) no-repeat 0 -108px ; }
.nav a { display : block ; width : 102px ; text-align : center ; font-size : 120% ; text-decoration : none ; }
.nav a:link, .nav a:visited { color : #fff ; text-decoration : none ; }
.nav a:hover, .nav a:active { color : #fff ; font-weight : bold ; background : url(nav_bg.png) no-repeat 50% -144px ; text-decoration : none ; }
</ style >
</ head >
< body >
< div class ="nav" >
   < div class ="navinner" >
     < ul class ="navlist" >
       < li >< a href ="http://www.qincai.net/" title ="首页" >首页 </ a ></ li >
       < li >< a href ="http://www.qincai.net/cat.html" title ="分类列表" rel ="nofollow" >分类列表 </ a ></ li >
       < li >< a href ="http://www.qincai.net/loc.html" title ="地区列表" rel ="nofollow" >地区列表 </ a ></ li >
       < li >< a href ="http://www.qincai.net/trade.html" title ="供求商机" rel ="nofollow" >供求商机 </ a ></ li >
       < li >< a href ="http://www.qincai.net/news.html" title ="行业新闻" rel ="nofollow" >行业新闻 </ a ></ li >
       < li >< a href ="http://www.qincai.net/submit.html" title ="提交企业" rel ="nofollow" >提交企业 </ a ></ li >
       < li >< a href ="http://fz.qincai.net/join.html" title ="发布商机" rel ="nofollow" >发布商机 </ a ></ li >
       < li >< a href ="http://www.qincai.net/find.html" title ="高级搜索" rel ="nofollow" >高级搜索 </ a ></ li >
     </ ul >
   </ div >
</ div >
</ body >
</ html >

<html> <head profile="http://gmpg.org/xfn/11"> <title>黄页地区列表</title> <style type="text/css"> body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体";text-align:center;} .nav {position: relative;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;} .navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;} .navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;} .nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;} .nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;} .nav a:link, .nav a:visited {color: #fff;text-decoration:none;} .nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;} </style> </head> <body> <div class="nav"> <div class="navinner"> <ul class="navlist"> <li><a href="http://www.qincai.net/" title="首页">首页</a></li> <li><a href="http://www.qincai.net/cat.html" title="分类列表" rel="nofollow">分类列表</a></li> <li><a href="http://www.qincai.net/loc.html" title="地区列表" rel="nofollow">地区列表</a></li> <li><a href="http://www.qincai.net/trade.html" title="供求商机" rel="nofollow">供求商机</a></li> <li><a href="http://www.qincai.net/news.html" title="行业新闻" rel="nofollow">行业新闻</a></li> <li><a href="http://www.qincai.net/submit.html" title="提交企业" rel="nofollow">提交企业</a></li> <li><a href="http://fz.qincai.net/join.html" title="发布商机" rel="nofollow">发布商机</a></li> <li><a href="http://www.qincai.net/find.html" title="高级搜索" rel="nofollow">高级搜索</a></li> </ul> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Demo下载

weixin_33738555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个横向菜单栏示例

菜单栏示例一：菜单源代码&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;...
复制链接

扫一扫