新建html文档。

书写hmtl代码。

<div class="z_main clear">

<div class="z_sub_nav">

    <span class="z_i1"><a href="#" class="on">首页</a></span>

        <span class="z_i2"><a href="#">系统管理</a></span>

        <div class="z_sub_nav_div">

            <ul>

                <li><a class="on" href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

                <li><a href="#">111111</a></li>

            </ul>

        </div>

    </div>

    <div class="right_box" style="background:#ccc; width:100%;"></div>

</div>

书写css代码。

.z_main{ position:relative; padding-left:180px;}

.z_main .z_sub_nav{ position:absolute; left:0; background:#2e363f; width:180px;}

.z_main .z_sub_nav .z_i1 a,.z_main .z_sub_nav .z_i2 a{ display:block; height:38px; line-height:38px; padding-left:50px;border-bottom:#37414b solid 1px;color:#939da8;}

.z_main .z_sub_nav .z_i1 a{background:#27a9e3 url(../images/i1.png) no-repeat 20px center; color:#FFF;}

.z_main .z_sub_nav .z_i2 a{ display:block; height:38px; line-height:38px;}

.z_main .z_sub_nav .z_i2 a{ background:url(../images/i3.png); background-repeat:no-repeat; background-position:20px center;}

.z_main .z_sub_nav .z_i2 a:hover{background-color:#27a9e3; color:#FFF;}

.z_main .z_sub_nav .z_sub_nav_div{overflow:hidden; overflow-y:auto; display:block;}

.z_main .z_sub_nav ul li a{ text-align:center; color:#939da8;display:block; height:38px; line-height:38px;background-color:#1e242b;background:url(../images/i5.png); background-repeat:no-repeat; background-position:40px center;}

.z_main .z_sub_nav ul li a:hover,.z_main .z_sub_nav ul li .on{ background-color:#28b779; color:#fff;}

.z_i3{ position:absolute; top:0; right:-20px; display:block; width:20px; height:40px; z-index:999999; overflow:hidden;}

.z_i3 a{ display:block; width:20px; height:40px; font-size:0; text-indent:-200;}

.z_i3 .z_open{background:url(../images/a1.png) no-repeat center center;}

.z_i3 .z_close{background:url(../images/a2.png) no-repeat center center;}

书写并添加js代码。

<script src="js/jquery-1.9.1.min.js"></script>

<script>

$(function(){

ChangeSize();

$(window).resize(function(){

ChangeSize();

});

});

function ChangeSize(){

$(".z_sub_nav,.right_box").css("height",($(window).height())+"px");

$(".z_sub_nav_div").css("height",($(window).height()-(200))+"px");

}

</script>

代码整体结构。

查看效果。

手机验证方法需要自己用手机测试，这里是用的浏览器自带的手机测试环境。