• 一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)


    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)</title>
    5 <style>
    6 *{margin:0;padding:0;}
    7 body{background:#FFF;color:#000;text-align:center;font:normal 12px Georgia, Arial, Helvetica, sans-serif;}
    8 a:link,a:visited{color:#369;text-decoration:underline;}
    9 a:hover{color:#C80000;text-decoration:none;}
    10 span,li,dt,dd,p,h1,h2,h3,h4,h5,h6{text-align:left;}
    11 img{border:0;}
    12 ul,li{list-style-type:none;}
    13 p{line-height:150%;}
    14 h1{margin:0 auto;width:100%;background:#353535 font-size:28px;height:60px;color:#FFF;line-height:60px;text-indent:60px;overflow:hidden;border-
    15
    16 bottom:3px solid #999;}
    17 #YMenu{margin:30px auto;width:590px;height:450px;overflow:hidden;border:3px solid #B0BEC7;padding:4px;}
    18 #YMenu-side{position:relative;z-index:2;float:left;width:200px;height:450px;border-right:3px solid #B0BEC7;}
    19 #YMenu-side h3{float:left;width:196px;clear:both;line-height:28px;font-size:14px;text-indent:10px;color:#369;background-
    20
    21 color:#EAEFF5;overflow:hidden;clear:both;}
    22 .YM-mainmnu{float:left;width:100%;clear:both;}
    23 .YM-mainmnu li{position:relative;z-index:2;cursor:pointer;float:left;width:180px;clear:both;min-height:28px;line-height:28px;text-
    24
    25 indent:10px;color:#999;}
    26 .YM-mainmnu li.current{border-top:1px solid #B0BEC7;border-left:1px solid #B0BEC7;border-bottom:2px solid #B0BEC7;border-right:1px solid
    27
    28 #EAEFF5;background-color:#EAEFF5;}
    29 .YM-mainmnu li.current a{font-size:14px;font-weight:bold;color:#C80000;}
    30 .YM-mainmnu li.current span{display:none;}
    31 .YM-mainmnu li .YM-submnu{position:absolute;z-index:3;left:179px;top:-1px;display:none;width:200px;overflow:hidden;border:solid #B0BEC7;border-
    32
    33 width:1px 2px 2px 0;background:#EAEFF5 url(../img/mnu-bg.gif) 0 0 no-repeat;}
    34 .YM-mainmnu li .YM-submnu li{float:left;clear:none;margin-left:10px;display:inline;text-indent:0;width:90px;overflow:hidden;line-
    35
    36 height:24px;color:#000;border:0;}
    37 .YM-mainmnu li .YM-submnu li a{font-size:12px;font-weight:normal;color:#369;}
    38 #YMenu-main{position:relative;z-index:1;float:right;width:383px;overflow:hidden;}
    39 #YMenu-main h2{margin:0 auto;width:100%;height:28px;line-height:28px;background-color:#EAEFF5;font-size:18px;text-align:center;overflow:hidden;}
    40 #YMenu-main p{margin:10px auto;width:100%;line-height:150%;font-size:14px;overflow:hidden;text-indent:28px;}
    41 .even{background-color:#F8F8F8;}
    42 .odd{background-color:#EAEFF5;}
    43 .hover{background-color:#B0BEC7;color:#FFF;cursor:pointer;}
    44 .hidden{display:none;clear:both;}
    45 #footer{margin:0 auto;width:960px;padding:15px 0;overflow:hidden;border-top:1px solid #999;}
    46 #footer p{margin:0 auto;padding:5px 0;width:960px;line-height:20px;text-align:center;font-size:14px;}
    47 </style>
    48 </head>
    49 <body>
    50 <h1>YTabs!侧边栏导航菜单</h1>
    51 <div id="YMenu">
    52 <div id="YMenu-side">
    53 <h3>家用电器</h3>
    54 <ul class="YM-mainmnu">
    55 <li class="YM-Tab">
    56 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    57 <ul class="YM-submnu">
    58 <li><a href="#1">洗衣机</a></li>
    59 <li><a href="#1">平板电视</a></li>
    60 <li><a href="#1">电热水器</a></li>
    61 <li><a href="#1">家庭音响</a></li>
    62 <li><a href="#1">燃气热水器</a></li>
    63 <li><a href="#1">空调</a></li>
    64 <li><a href="#1">冰箱冷柜</a></li>
    65 <li><a href="#1">DVD播放器</a></li>
    66 <li><a href="#1">电视附件</a></li>
    67 <li><a href="#1">家电服务</a></li>
    68 <li><a href="#1">家电下乡</a></li>
    69 </ul>
    70 </li>
    71 <li class="YM-Tab">
    72 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    73 <ul class="YM-submnu">
    74 <li><a href="#1">洗衣机</a></li>
    75 <li><a href="#1">平板电视</a></li>
    76 <li><a href="#1">电热水器</a></li>
    77 <li><a href="#1">家庭音响</a></li>
    78 <li><a href="#1">燃气热水器</a></li>
    79 <li><a href="#1">空调</a></li>
    80 <li><a href="#1">冰箱冷柜</a></li>
    81 <li><a href="#1">DVD播放器</a></li>
    82 <li><a href="#1">电视附件</a></li>
    83 <li><a href="#1">家电服务</a></li>
    84 <li><a href="#1">家电下乡</a></li>
    85 </ul>
    86 </li>
    87 <li class="YM-Tab">
    88 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    89 <ul class="YM-submnu">
    90 <li><a href="#1">洗衣机</a></li>
    91 <li><a href="#1">平板电视</a></li>
    92 <li><a href="#1">电热水器</a></li>
    93 <li><a href="#1">家庭音响</a></li>
    94 <li><a href="#1">燃气热水器</a></li>
    95 <li><a href="#1">空调</a></li>
    96 <li><a href="#1">冰箱冷柜</a></li>
    97 <li><a href="#1">DVD播放器</a></li>
    98 <li><a href="#1">电视附件</a></li>
    99 <li><a href="#1">家电服务</a></li>
    100 <li><a href="#1">家电下乡</a></li>
    101 </ul>
    102 </li>
    103 <li class="YM-Tab">
    104 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    105 <ul class="YM-submnu">
    106 <li><a href="#1">洗衣机</a></li>
    107 <li><a href="#1">平板电视</a></li>
    108 <li><a href="#1">电热水器</a></li>
    109 <li><a href="#1">家庭音响</a></li>
    110 <li><a href="#1">燃气热水器</a></li>
    111 <li><a href="#1">空调</a></li>
    112 <li><a href="#1">冰箱冷柜</a></li>
    113 <li><a href="#1">DVD播放器</a></li>
    114 <li><a href="#1">电视附件</a></li>
    115 <li><a href="#1">家电服务</a></li>
    116 <li><a href="#1">家电下乡</a></li>
    117 </ul>
    118 </li>
    119 </ul>
    120 <h3>手机数码</h3>
    121 <ul class="YM-mainmnu">
    122 <li class="YM-Tab">
    123 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    124 <ul class="YM-submnu">
    125 <li><a href="#1">洗衣机</a></li>
    126 <li><a href="#1">平板电视</a></li>
    127 <li><a href="#1">电热水器</a></li>
    128 <li><a href="#1">家庭音响</a></li>
    129 <li><a href="#1">燃气热水器</a></li>
    130 <li><a href="#1">空调</a></li>
    131 <li><a href="#1">冰箱冷柜</a></li>
    132 <li><a href="#1">DVD播放器</a></li>
    133 <li><a href="#1">电视附件</a></li>
    134 <li><a href="#1">家电服务</a></li>
    135 <li><a href="#1">家电下乡</a></li>
    136 </ul>
    137 </li>
    138 <li class="YM-Tab">
    139 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    140 <ul class="YM-submnu">
    141 <li><a href="#1">洗衣机</a></li>
    142 <li><a href="#1">平板电视</a></li>
    143 <li><a href="#1">电热水器</a></li>
    144 <li><a href="#1">家庭音响</a></li>
    145 <li><a href="#1">燃气热水器</a></li>
    146 <li><a href="#1">空调</a></li>
    147 <li><a href="#1">冰箱冷柜</a></li>
    148 <li><a href="#1">DVD播放器</a></li>
    149 <li><a href="#1">电视附件</a></li>
    150 <li><a href="#1">家电服务</a></li>
    151 <li><a href="#1">家电下乡</a></li>
    152 </ul>
    153 </li>
    154 <li class="YM-Tab">
    155 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    156 <ul class="YM-submnu">
    157 <li><a href="#1">洗衣机</a></li>
    158 <li><a href="#1">平板电视</a></li>
    159 <li><a href="#1">电热水器</a></li>
    160 <li><a href="#1">家庭音响</a></li>
    161 <li><a href="#1">燃气热水器</a></li>
    162 <li><a href="#1">空调</a></li>
    163 <li><a href="#1">冰箱冷柜</a></li>
    164 <li><a href="#1">DVD播放器</a></li>
    165 <li><a href="#1">电视附件</a></li>
    166 <li><a href="#1">家电服务</a></li>
    167 <li><a href="#1">家电下乡</a></li>
    168 </ul>
    169 </li>
    170 <li class="YM-Tab">
    171 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
    172 <ul class="YM-submnu">
    173 <li><a href="#1">洗衣机</a></li>
    174 <li><a href="#1">平板电视</a></li>
    175 <li><a href="#1">电热水器</a></li>
    176 <li><a href="#1">家庭音响</a></li>
    177 <li><a href="#1">燃气热水器</a></li>
    178 <li><a href="#1">空调</a></li>
    179 <li><a href="#1">冰箱冷柜</a></li>
    180 <li><a href="#1">DVD播放器</a></li>
    181 <li><a href="#1">电视附件</a></li>
    182 <li><a href="#1">家电服务</a></li>
    183 <li><a href="#1">家电下乡</a></li>
    184 </ul>
    185 </li>
    186 </ul>
    187 </div>
    188 </div>
    189 <script language="javascript" type="text/javascript" src="http://www.webdm.cn/images/20090910/yao.js"></script>
    190 <script language="javascript" type="text/javascript">
    191 <!--
    192 YAO.YTabs({
    193 tabs: YAO.getElByClassName('YM-Tab', 'li', 'YMenu-side'),
    194 contents: YAO.getElByClassName('YM-submnu', 'ul', 'YMenu-side'),
    195 hideAll: true
    196 });
    197 //-->
    198 </script>
    199 </body>
    200 </html>
    201 <br>
    202 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

    文章来自:http://www.webdm.cn/webcode/6de11c91-90b8-42ce-8681-96b9e1459c91.html

  • 相关阅读:
    ASP.NET零碎
    My97DatePicker 和转换 数据库中日期(/Date(1351699200000)/) 的格式
    生成验证码
    自己封装的AJAX (带JSON)
    WebForm
    配置进程外Session
    使用Xcode和Instruments调试解决iOS内存泄露
    IOS block 教程<转>
    iOS app支付宝接口调用的一点总结(补充支付宝SDK&Demo下载地址)
    支付宝在ios应用上的开发[转]
  • 原文地址:https://www.cnblogs.com/webdm/p/1916550.html
Copyright © 2020-2023  润新知