zoukankan      html  css  js  c++  java
  • CSS橙色二级水平菜单

    演示效果截图

    CSS橙色二级水平菜单
    

    用到的图片

    
    CSS橙色二级水平菜单 图片打包下载
    

    CSS代码

    /*全局样式*/
    *{font-size:12px;}
    body{margin:0;padding:0;background-color:#FFFFFF;
    font-size:12px;color:#666666;
    font-family: "宋体",Arial, Helvetica, sans-serif;}
    /*主导航菜单*/
    #menu ul{padding:0;border:0;list-style:none;
    line-height:150%;margin-top: 0;margin-right: 0;
    margin-bottom: 0;margin-left: 15px;}
    #menu_out{966px;padding-left:4px;
    margin-left:auto;margin-right:auto;
    background:url(menu_left.gif) no-repeat left top;}
    #menu_in{
    background:url(menu_right.gif) no-repeat right top;
    padding-right:4px;}
    #menu{background:url(menu_bg.gif) repeat-x;
    height:73px;}
    .menu_line{
    background:url(menu_line.gif) no-repeat center top;
    8px;}
    .menu_line2{
    background:url(menu_line2.gif) no-repeat center top;
    15px;}
    #nav{padding-left:20px;}
    #nav li{float:left;height:35px;}
    #nav li a{float:left;display:block;
    padding-left:6px;height:35px;
    background:url(menu_on_left.gif) no-repeat left top;
    cursor:pointer;text-decoration:none;}
    #nav li a span{float:left;padding:11px 14px 10px 10px;
    background:url(menu_on_right.gif) no-repeat right top;
    font-size:14px;line-height:14px;
    font-weight:bold;color:#FFFFFF;text-decoration:none;}
    #nav li .nav_on{   /*鼠标经过时变换背景,方便JS获取样式*/
    background-position:left 100%;}
    #nav li .nav_on span{  /*鼠标经过时变换背景,方便JS获取样式*/
    background-position:right 100%;color:#333333;
    text-decoration:none;padding:14px 14px 7px 10px;}
    /*子栏目*/
    #menu_con{text-align:left;
    padding-left:20px;clear:both;}
    #menu_con li{float:left;
    height:22px;margin-top:8px;}
    #menu_con li a{display:block;float:left;
    background:url(menu_on_left2.gif) no-repeat left top;
    cursor:pointer;padding-left:3px;}
    #menu_con li a span{float:left;
    padding:6px 10px 4px 10px;line-height:12px;
    background:url(menu_on_right2.gif) no-repeat right top;}
    #menu_con li a:hover{text-decoration:none;
    background:url(menu_on_left2.gif) no-repeat left bottom;}
    #menu_con li a:hover span{
    background:url(menu_on_right2.gif) no-repeat right bottom;}

    JavaScript代码

    <script language="javascript">
    function qiehuan(num){
    for(var id = 0;id<=9;id++){
    if(id==num){
    document.getElementById("qh_con"+id).style.display="block";
    document.getElementById("mynav"+id).className="nav_on";
    }else{
    document.getElementById("qh_con"+id).style.display="none";
    document.getElementById("mynav"+id).className="";
    }}}
    </script>

    HTML代码

    <div id=menu_out>
    <div id=menu_in>
    <div id=menu>
    <UL id=nav>
    <LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0)
     href="http://www.865171.cn/"><SPAN>首 页</SPAN></A></LI>
    <LI class="menu_line"></LI><li>
    <a href="http://www.865171.cn/css-templates/" 
    onmouseover="javascript:qiehuan(1)" id="mynav1" 
    class="nav_off"><span>CSS模板</span></a></li>
    <li class="menu_line"></li><li>
    <a href="http://www.865171.cn/admin-templates/" 
    onmouseover="javascript:qiehuan(2)" id="mynav2" 
    class="nav_off"><span>后台模板</span></a></li>
    <li class="menu_line"></li><li>
    <a href="http://www.865171.cn/css-code/" 
    onmouseover="javascript:qiehuan(3)" id="mynav3" 
    class="nav_off"><span>CSS代码</span></a></li>
    <li class="menu_line"></li><li>
    <a href="http://www.865171.cn/css-menu/" 
    onmouseover="javascript:qiehuan(4)" id="mynav4" 
    class="nav_off"><span>CSS菜单</span></a></li>
    <li class="menu_line"></li><li>
    <a href="http://www.865171.cn/csss-chart/" 
    onmouseover="javascript:qiehuan(5)" id="mynav5" 
    class="nav_off"><span>CSS图表</span></a></li>
    </UL><div id=menu_con>
    <div id=qh_con0 style="DISPLAY: block"><UL>
    <LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI>
    <LI><A href="http://www.865171.cn/">
    <SPAN>首 页</SPAN></A></LI>
    </UL></div><div id=qh_con1 style="DISPLAY: none"><UL>
    <LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI>
    <LI><A href="http://www.865171.cn/">
    <SPAN>CSS模板</SPAN></A></LI></UL></div> 
    <div id=qh_con2 style="DISPLAY: none">
    <UL><LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
    <SPAN>后台模板</SPAN></A></LI></UL></div> 
    <div id=qh_con3 style="DISPLAY: none">
    <UL><LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
    <SPAN>CSS代码</SPAN></A></LI></UL></div> 
    <div id=qh_con4 style="DISPLAY: none">
    <UL><LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
    <SPAN>CSS菜单</SPAN></A></LI></UL></div> 
    <div id=qh_con5 style="DISPLAY: none">
    <UL><LI><a href="http://www.865171.cn/">
    <span>免费模板网 www.865171.cn</span></A></LI>
    <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/">
    <SPAN>CSS图表</SPAN></A></LI></UL></div> 
    </div></div></div></div> 
    <br /><br />
    <div id="a"><a href="http://www.865171.cn" target="_blank">
    免费模板网 www.865171.cn</a></div>
  • 相关阅读:
    ubuntu12.04 死机 卡屏 画面冻结解决方案
    Install Firefox 20 in Ubuntu 13.04, Ubuntu 12.10, Ubuntu 12.04, Linux Mint 14 and Linux Mint 13 by PPA
    ListView1.SelectedItems.Clear()
    android studio 下载地址
    jquery.slider.js jquery幻灯片测试
    jquery.hovermenu.js
    jquery.tab.js选项卡效果
    适配 placeholder,jquery版
    jquery.autoscroll.js jquery自动滚动效果
    将 Google Earth 地图集成到自己的窗体上的 简单控件
  • 原文地址:https://www.cnblogs.com/luluping/p/1542053.html
Copyright © 2011-2022 走看看