昨天花了半天时间写好了网站左侧导航栏目模块，给自己的网站增加了一些与其他z-blog不一样的元素。

上线这个博客之前一直在考虑使用什么样的模板，最后决定自己花几天时间写一个z-blog主题出来，前期看自己的效果图感觉还是比较满意的。可是写到最后感觉有一些简单了，应该是审美疲劳吧。所以决定上线之后慢慢添加一些有粘性的模块等。

昨天增加的网站左侧导航栏目样式及代码：（具体效果请看网站首页，Chrome下测试开发）

Style：

<style type="text/css">
#SiderMenu {
  height: 100%;
  width: 0;
  background: #5F5F5F;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  -webkit-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
  -moz-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
  box-shadow: 3px 0 7px rgba(0,0,0,0.55);
}
#SiderMenu ul {
  margin-top: 45px;
  z-index: 101;
  overflow-y: auto;
  overflow-x: hidden;
}
#SiderMenu ul li {
  display: block;
  vertical-align:middle;
}
#SiderMenu ul li a {
  display: block;
  min-width: 130px;
  padding: 18px 2px;
  color: #cdcdcd;
  font-size: 1.45em;
  font-weight: bold;
  text-decoration: none;
  text-align:left;
}
#SiderMenu li a:hover {
  color: #fff;
  background: #000;
}
#SiderMenu ul li img{
  width:28px;
  height:18px;
}
</style>

HTML：

<div id="SiderMenu" style="overflow: hidden; width:30px;">
    <ul>
      <li><a href="#"><img src="../images/home.png" alt="home">Home</a></li>
      <li><a href="#"><img src="../images/music.png" alt="music">Music</a></li>
      <li><a href="#"><img src="../images/code.png" alt="code">Code</a></li>
      <li><a href="#"><img src="../images/color.png" alt="color">Color</a></li>
      <li><a href="#"><img src="../images/game.png" alt="game">Game</a></li>
    </ul>
    <div class="panelhide" style="float:right;">hide</div>
</div>

Javascript：

$(function(){
  var menuwidth  = 14; // 边栏宽度  百分比
  var menuspeed  = 400; // 边栏滑出耗费时间
  var $bdy       = $('body');
  var $container = $('.container');
  var $burger    = $('#SiderMenu');
  var negwidth   = "-"+menuwidth+"%";
  var poswidth   = menuwidth+"%";
  $('#SiderMenu').live('hover',function(e){
    if($bdy.hasClass('openmenu')) {
      jsAnimateMenu('close');
    } else {
      jsAnimateMenu('open');
    }
  });
  function jsAnimateMenu(tog) {
    if(tog == 'open') {
      $bdy.addClass('openmenu');
      $burger.animate({width: poswidth}, menuspeed);
    }
    if(tog == 'close') {
      $bdy.removeClass('openmenu');
      $burger.animate({width: "30px"}, menuspeed);
    }
  }
});