admin 发布时间:2014-08-07 分类:Web 阅读:8654次 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); } } });
上一篇:顾陌博客网站可以在线听音乐啦
下一篇:安卓系统多用户时代来临
发布于 2015-04-08 17:31:17 回复该评论
发布于 2014-08-07 22:05:54 回复该评论
发布于 2014-08-08 08:17:51 回复该评论
发布于 2014-08-07 09:41:41 回复该评论
发布于 2014-08-07 11:19:58 回复该评论
歌曲页面是单独页面啊,你不关闭怎么会关闭.....o(╯□╰)o
发表评论:
◎欢迎您的参与讨论。