html 多级菜单

html 多级菜单_第1张图片


<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-001a>
            <i>i>
            div>
            <ul class="sub-menus">
            <li><a href="javascript:;">001-001-01a>li>
            <li><a href="javascript:;">001-001-02a>li>
            <li><a href="javascript:;">001-001-03a>li>
            <li><a href="javascript:;">001-001-04a>li>
            ul>
        li>

        <li>
            <div class="header">
            <cite>cite>
            <a href="right.html" target="rightFrame">001-002a>
            <i>i>
            div>                
            <ul class="sub-menus">
            <li><a href="javascript:;">001-002-01a>li>
            <li><a href="javascript:;">001-002-02a>li>
            <li><a href="javascript:;">001-002-03a>li>
            <li><a href="javascript:;">001-002-04a>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-001a><i>i>li>
        <li><cite>cite><a href="project.html" target="rightFrame">002-002a><i>i>li>
        <li><cite>cite><a href="search.html" target="rightFrame">002-003a><i>i>li>
        <li><cite>cite><a href="tech.html" target="rightFrame">002-004a><i>i>li>
        ul>     
    dd> 

    dl>

body>
html>
@charset "utf-8";
/* CSS Document */
/***
 * uimaker
 * http://www.uimaker.com
 * e-mail: [email protected]
 */
*{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;}


你可能感兴趣的:(html)