jQuery+Div Simple menu

let's look at the sample first:

here is the code, as it is so simple, there is no more comment. any questions, please feel free to leave a message to me:

 

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" 

type="text/javascript"></script>

    <script>
    $(document).ready(function () {
    $(".parent").next().hide();
    $(".parent").toggle(function () {
        $(this).next().show("50");
        $(this).removeClass("parent").addClass("minus");
    }, function () {
        $(this).next().hide("50");
        $(this).removeClass("minus").addClass("parent");
    }
    );
});
</script>
    <style>
body{
     font-size:12px;
}
div{
     padding-left:10px;
}
.parent{
    background-image:url("plus.gif");
     padding-left:15px;
     background-position:center left;
     background-repeat:no-repeat;
     cursor:pointer;
}
.parent:hover{
     padding-left:18px;
}
.minus{
    background-image:url("minus.gif");
    padding-left:15px;
    background-repeat:no-repeat;
     background-position:center left;
}

    </style>
</head>
<body>
<div id="menu">
    <div class="parent">国内网站</div>
    <div>
        <div>新浪</div>
        <div>搜狐</div>
        <div>网易</div>
        <div class="parent">国内知名站点</div>
        <div>
            <div>博客园</div>
            <div>韩现龙的博客</div>
        </div>
    </div>
     <div class="parent">国外站点</div>
    <div>
        <div>白宫</div>
        <div class="parent">国外政府网站</div>
        <div>
            <div>美国网站</div>
            <div>北美网站</div>
        </div>
        <div>伊拉克</div>
        <div>英国BBC</div>
    </div>
</div>
</body>
</html>

 

 

posted on 2010-05-31 23:10  是谁啊？  阅读(489)  评论(0)  编辑  收藏  举报