html+css3+jquery右侧弹出侧边栏导航菜单

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="box-bj"><img src="images/wd011.jpg" /></div>

<div id="mintbar"><a id="closebtn" href="#"><img src="images/wd02.png" /></a></div>

<div id="mint" style="display:none;position:absolute;top:0;right:0px;">

  <div class="box-nav-bj"><img style="right:0px; top:0px;" src="images/wd06.png" /></div>

  <div class="box-nav">

    <li><a href="#">关于我们</a></li>

    <li><a href="#">产品展示</a></li>

    <li><a href="#">案例展示</a></li>

    <li><a href="#">新闻中心</a></li>

    <li><a href="#">新闻资讯</a></li>

    <li><a href="#">联系我们</a></li>

  </div>

  <img src="images/wd07.png" alt="丝带"/>

</div>

<div class="box-dibu">

  <div class="box-dibu2"> <a href="#"><img src="images/wd04.png" /></a> <a href="#"><img src="images/wd05.png" /></a> </div>

</div>

4、书写css代码。

* { margin: 0px; padding: 0px; }

.clear { clear: both }

small { padding-left: 7px; font-size: 12px; color: #000; font-weight: normal; }

.body { width: 100%; height: 100%; display: block; overflow: hidden; margin: 0px; padding: 0px }

.box-bj { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; overflow: hidden; left: 0px; }

.box-bj img { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.box-nav-bj { width: 297px; height: 100%; margin: 0px; padding: 0px; position: absolute; right: 0px; z-index: -5 }

.box-nav-bj img { width: 100%; height: 100%; margin: 0px; padding: 0px; position: absolute; right: 0px; z-index: -5 }

.box-nav { width: 160px; height: auto; margin: 0 0 0 135px; padding: 0px; z-index: 20; position: absolute; right: 0px; top: 20%; _top: 150px; }

.box-nav li { width: 105px; height: 35px; margin: 18px 0; padding: 0px; border: 1px solid #fff; text-align: center; line-height: 35px; }

.box-nav li a { font-size: 18px; color: #fff; }

.box-nav li:hover { border: 1px solid #c2090c; }

.box-nav li:hover a { font-size: 18px; color: #c2090c; }

.box-phone { width: 150px; height: auto; margin: 0px; padding: 0px; z-index: 20; position: absolute; right: 0px; bottom: 60px; }

.box-phone p { font-family: "微软雅黑"; color: #fff; font-size: 15px; line-height: 30px; }

.box-dibu { width: 93%; height: auto; margin: 0 auto; position: absolute; bottom: 0px; left: 3%; z-index: 30; }

.box-dibu1 { width: 60%; height: auto; margin: 0 auto; float: left; font-size: 12px; color: #fff; }

.box-dibu1 p { font-size: 12px; color: #fff; line-height: 25px; }

.box-dibu2 { width: 30%; height: auto; margin: 0 auto; float: right; }

.box-dibu2 a img { width: 34px; height: 34px; float: right; display: block; margin: 0 0 0 15px; }

#mintbar { font-size: 14px; font-family: Arial, Helvetica, Sans-serif; color: #FFF; padding: 0; position: absolute; top: 40px; right: 90px; z-index: 2000; width: 47px; text-align: center; height: 62px; }

#mintbar div { position: relative; margin: 0 auto; padding-top: 10px; width: 960px; height: 30px; }

#mintbar div h2 { float: left; font-size: 16px; }

#closebtn { float: right; }

#mint { cursor: pointer; position: relative; z-index: 10; height: 100%; }

#mint img { position: absolute; right: 225px; top: 40px; display: block; }

5、书写并添加js代码。

<script src="js/jquery1.42.min.js"></script>

<script>

$(document).ready(function(){

    function anim(duration){

        $('#mint').animate(

            {height: 'toggle'},

            {duration: duration}

        );

    }

    $('#closebtn').click(function() {

        $('#mintbar').slideUp();

        anim(600);

    });

    $('#mint').click(function() {

        anim(600);

        $('#mintbar').slideDown('slow');

    });

});

</script>

6、代码整体结构。

7、查看效果。