html 多级菜单

最新推荐文章于 2024-05-27 17:27:19 发布

魑魅魍魉9527

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量1.4w

点赞数 8

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_28934205/article/details/78622949

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里写图片描述

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/mymenu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery.js"></script>


<script type="text/javascript">
$(function(){  
    //导航切换
    $(".menuson .header").click(function(){
        var $parent = $(this).parent();
        $(".menuson>li.active").not($parent).removeClass("active open").find('.sub-menus').hide();

        $parent.addClass("active");
        if(!!$(this).next('.sub-menus').size()){
            if($parent.hasClass("open")){
                $parent.removeClass("open").find('.sub-menus').hide();
            }else{
                $parent.addClass("open").find('.sub-menus').show();    
            }   
        }
    });
    // 三级菜单点击
    $('.sub-menus li').click(function(e) {
        $(".sub-menus li.active").removeClass("active")
        $(this).addClass("active");
    });

    $('.title').click(function(){
        var $ul = $(this).next('ul');
        $('dd').find('.menuson').slideUp();
        if($ul.is(':visible')){
            $(this).next('.menuson').slideUp();
        }else{
            $(this).next('.menuson').slideDown();
        }
    });
})  
</script>


</head>

<body style="background:#f0f9fd;">
    <div class="lefttop"><span></span>菜单</div>

    <dl class="leftmenu">

    <dd>
    <div class="title">
    <span><img src="images/leftico01.png" /></span>001
    </div>
        <ul class="menuson">

        <li  class="active">
            <div class="header">
            <cite></cite>
            <a href="index.html" target="rightFrame">001-001</a>
            <i></i>
            </div>
            <ul class="sub-menus">
            <li><a href="javascript:;">001-001-01</a></li>
            <li><a href="javascript:;">001-001-02</a></li>
            <li><a href="javascript:;">001-001-03</a></li>
            <li><a href="javascript:;">001-001-04</a></li>
            </ul>
        </li>

        <li>
            <div class="header">
            <cite></cite>
            <a href="right.html" target="rightFrame">001-002</a>
            <i></i>
            </div>                
            <ul class="sub-menus">
            <li><a href="javascript:;">001-002-01</a></li>
            <li><a href="javascript:;">001-002-02</a></li>
            <li><a href="javascript:;">001-002-03</a></li>
            <li><a href="javascript:;">001-002-04</a></li>
            </ul>
        </li>

        </ul>    
    </dd>


    <dd>
    <div class="title">
    <span><img src="images/leftico02.png" /></span>002
    </div>
    <ul class="menuson">
        <li><cite></cite><a href="flow.html" target="rightFrame">002-001</a><i></i></li>
        <li><cite></cite><a href="project.html" target="rightFrame">002-002</a><i></i></li>
        <li><cite></cite><a href="search.html" target="rightFrame">002-003</a><i></i></li>
        <li><cite></cite><a href="tech.html" target="rightFrame">002-004</a><i></i></li>
        </ul>     
    </dd> 

    </dl>

</body>
</html>

@charset "utf-8";
/* CSS Document */
/***
 * uimaker
 * http://www.uimaker.com
 * e-mail: admin@uimaker.com
 */
*{font-size:9pt;border:0;margin:0;padding:0;}
body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}
ul{display:block;margin:0;padding:0;list-style:none;}
li{display:block;margin:0;padding:0;list-style: none;}
img{border:0;}
dl,dt,dd,span{margin:0;padding:0;display:block;}
a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#00a4ac;text-decoration:none;}
table{border-collapse:collapse;border-spacing: 0;}
cite{font-style:normal;}
h2{font-weight:normal;}

/*left.html*/
.lefttop{background:url(../images/lefttop.gif) repeat-x;height:40px;color:#fff;font-size:14px;line-height:40px;}
.lefttop span{margin-left:8px; margin-top:10px;margin-right:8px; background:url(../images/leftico.png) no-repeat; width:20px; height:21px;float:left;}
.leftmenu{width:187px;padding-bottom: 9999px;margin-bottom: -9999px; overflow:hidden; background:url(../images/leftline.gif) repeat-y right;}
.leftmenu dd{background:url(../images/leftmenubg.gif) repeat-x;line-height:35px;font-weight:bold;font-size:14px;border-right:solid 1px #b7d5df;}
.leftmenu dd span{float:left;margin:10px 8px 0 12px;}
.leftmenu dd .menuson{display:none;}
.leftmenu dd:first-child .menuson{display:block;}
.menuson {line-height:30px; font-weight:normal; }
.menuson li{cursor:pointer;}
.menuson li.active{position:relative; background:url(../images/libg.png) repeat-x; line-height:30px; color:#fff;}
.menuson li cite{display:block; float:left; margin-left:32px; background:url(../images/list.gif) no-repeat; width:16px; height:16px; margin-top:7px;}
.menuson li.active cite{background:url(../images/list1.gif) no-repeat;}
.menuson li.active i{display:block; background:url(../images/sj.png) no-repeat; width:6px; height:11px; position:absolute; right:0;z-index:10000; top:9px; right:-1px;}
.menuson li a{ display:block; *display:inline; *padding-top:5px;}
.menuson li.active a{color:#fff;}
.title{cursor:pointer;}


/**支持二级菜单覆盖样式**/
.menuson li .header{height:30px;}
.menuson li .sub-menus{ display:none; background:#d9ebf3;padding:10px 0;border-bottom:1px solid #b7d5df;}
.menuson li .sub-menus li{height:25px;line-height:25px;padding-left:48px;border-left:1px solid #d9ebf3;}
.menuson li .sub-menus li.active{position:relative;right:-1px;border-left:none;background:#fff;}
.menuson li .sub-menus li a{padding-left:9px;color:#000000; background:url(../images/sub-menu-icon.png) 0 12px no-repeat;}
.menuson li .sub-menus li a:hover{color:#238ac5;}
.menuson li .sub-menus li.active a{color:#238ac5;}
.menuson li.active.open cite{margin-top:12px;margin-left:37px; background:url(../images/jtx.png) no-repeat;}

魑魅魍魉9527

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
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><meta http-equiv="Content-Ty
复制链接

扫一扫