xugang

记录一个.NET 程序员的成长

 

两个横向菜单栏示例

 

菜单栏示例一:
菜单源代码
<!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"><href="#" class="menu_a1">第一栏</a></li>
                <li><href="#" class="menu_a1">第二栏</a></li>
                <li><href="#" class="menu_a1">第三栏</a></li>
                <li><href="#" class="menu_a1">第四栏</a></li>
                <li><href="#" class="menu_a1">第五栏</a></li>
                <li><href="#" class="menu_a1">第六栏</a></li>
            </ul>
        </div>
        <div class="menu2">
            <ul>
                <li>
                    <ul>
                        <li><href="#" class="menu_a2">第一栏</a></li>
                        <li><href="#" class="menu_a2">第一栏</a></li>
                        <li><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><href="http://www.qincai.net/" title="首页">首页</a></li>
      <li><href="http://www.qincai.net/cat.html" title="分类列表" rel="nofollow">分类列表</a></li>
      <li><href="http://www.qincai.net/loc.html" title="地区列表" rel="nofollow">地区列表</a></li>
      <li><href="http://www.qincai.net/trade.html" title="供求商机" rel="nofollow">供求商机</a></li>
      <li><href="http://www.qincai.net/news.html" title="行业新闻" rel="nofollow">行业新闻</a></li>
      <li><href="http://www.qincai.net/submit.html" title="提交企业" rel="nofollow">提交企业</a></li>
      <li><href="http://fz.qincai.net/join.html" title="发布商机" rel="nofollow">发布商机</a></li>
      <li><href="http://www.qincai.net/find.html" title="高级搜索" rel="nofollow">高级搜索</a></li>
    </ul>
  </div>
</div>
</body>
</html>


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 

Demo下载

 

posted on 2011-11-15 22:05  钢钢  阅读(...)  评论(... 编辑 收藏

导航

统计