• 两个横向菜单栏示例

     

    菜单栏示例一：
    菜单源代码
    <!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="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>


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

     

    Demo下载

     

    作者： XuGang   网名：钢钢
    出处： http://xugang.cnblogs.com
    声明： 本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！
  • 相关阅读:
    目标检测之YOLOv3
    残差网络（ResNet）
    FPN详解
    YOLOv2/YOLO 9000深入理解
    批归一化（BN）
    全卷积网络FCN
    基于深度学习的目标检测算法综述
    目标检测两个基础部分——backbone and detection head
    YOLOv1 深入理解
    内置模块
  • 原文地址：https://www.cnblogs.com/xugang/p/2250355.html
Copyright © 2020-2023  润新知