簡單左拉菜單欄-css+js

構思：和上一篇的下拉菜單欄思考角度差不多。知識多了js的兩個函數show()和hide().

這個是定義整一個視窗爲一個大容器，上一篇是以div爲一個大容器。

通過設置它的外邊距margin確定在視窗那個位置，設置width和height來設置寬度和高度。

在html中ul#sidebar爲包容全部內容。通過三個li爲第一級菜單，li下面嵌套<ul><li></li></ul>來設置第二極菜單。

再設置第一級菜單position，height和width。

第二級菜單是position，和top（距離大容器頂部的top），left（距離大容器的左邊距離），再設置整一個二級菜單的height和width。還有一個關鍵是display：none；頁面中不顯示左邊的二級菜單，當hover第一級菜單時用js顯示二級菜單。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meat name="description" content=""/>
    <meta name="keywords" content=""/>
    <title>左拉菜單</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul id="sidebar">
    <li><span>貓糧</span>
    <ul>
        <li><a href="#">品dd質</a></li>
        <li><a href="#">產dd地</a></li>
        <li><a href="#">原dd料</a></li>
        <li><a href="#">原dd料</a></li>
        <li><a href="#">原dd料</a></li>
    </ul>
    </li>
    <li><span>貓糧</span>
        <ul>
            <li><a href="#">品aa質</a></li>
            <li><a href="#">產aa地</a></li>
            <li><a href="#">原aa料</a></li>
        </ul>
    </li>

    <li><span>貓糧</span>
        <ul>
            <li><a href="#">品ss質</a></li>
            <li><a href="#">產ss地</a></li>
            <li><a href="#">原ss料</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript" src="../jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

style.css

/*整一個都歸零的狀態，纔可以在後面調整*/
*{
    margin:0;
    padding:0;
    border:0;
}
/*定義視窗爲整一個大容器*/
#sidebar{
    /*其包含框就是視窗本身*/
    position:fixed;
    margin: 200px 100px;
    height: auto;
    width:150px;
}
/*所有ul標籤去掉圓點*/
ul{
    /*整一個ul浮動向上，使模塊之間向上銜接*/
    float:top;
    list-style-type:none
}
/*所有a標籤去橫線*/
a{
    text-decoration:none;
}

/*第一級菜單“貓糧”這個模塊的定位*/
#sidebar> li{
    /*background: #2fa0ec;*/
    position: relative;
    /*定義模塊的高度*/
    height: 60px;
    width:100%;
}
/*當鼠標觸摸是，背景顏色和文字顏色設置*/
#sidebar>li:hover{
    background-color:#6D695C;
    color: #ff0000;
}
/*二級菜單的設置，作爲整一個模塊*/
#sidebar>li>ul{
    /*display使ul整個模塊不顯示，關鍵*/
    display:none;
    /*絕對定位，距離整一個大容器*/
    position: absolute;
    top:0;
    /*距離大容器左距離*/
    left:150px;
    /*模塊的高度*/
    height:auto;
    width:200px;
}
/*#sidebar>li>ul>li{*/
    /*height:30px;*/

/*}*/

/*#sidebar>li>ul>li:hover{*/
    /*background-color:#00CCFF;*/
/*}*/

當css中二級菜單display沒有時顯示如下：

當display爲none時，左邊菜單不顯示：

index.js文件

jQuery(document).ready(function($) {

    $("#sidebar li").hover(
        function(){
            $(this).children('ul').show(300);
        },
        function(){
            $(this).children('ul').hide(250);
        });
});

整體簡陋效果：

整體需要優化一下。。。。。。。