网站左侧导航栏导航代码

admin 发布时间:2014-08-07 分类:Web 阅读:2987次 5 条评论

昨天花了半天时间写好了网站左侧导航栏目模块,给自己的网站增加了一些与其他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);
    }
  }
});


关键字词: 左侧导航栏代码

已有5条留言
  • 屠龙
    发布于 2014-08-07 22:05:54  回复该评论
  • 很复杂的代码,没看懂。
    • Super
      发布于 2014-08-08 08:17:51  回复该评论
    • 其实很简单的,就是一个JS函数控制栏目的宽度。主要是这个animate,网上一看便知道这个的用法。
  • 千君君博客
    发布于 2014-08-07 09:41:41  回复该评论
  • 能不能让文章页也能调用?是不是打开另一个页面歌曲直接关了啊?
    • Super
      发布于 2014-08-07 11:19:58  回复该评论
    • 可以啊。不过我只是在文章列表页安装了导航代码。文章详细页还没有。
      歌曲页面是单独页面啊,你不关闭怎么会关闭.....o(╯□╰)o

发表评论:

◎欢迎您的参与讨论。