默认显示”关闭侧边栏”,点击”关闭侧边栏”,侧边栏消失,显示”显示侧边栏”,具体效果点击文章右上角试试吧~
代码如下:在你需要的位置添加
<div class="close-sidebar"><a href="#">关闭侧边栏</a></div> <div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div>
jQuery代码:
jQuery(document).ready(function($) { $('.close-sidebar').click(function() { $('.close-sidebar,.sidebar').hide(); $('.show-sidebar').show(); $('.content').animate({ width: "1238px" }, 1000); }); $('.show-sidebar').click(function() { $('.show-sidebar').hide(); $('.close-sidebar,.sidebar').show(); $('.content').animate({ width: "838px" }, 1000); }); });
当然了,这里的.sidebar和.content都要修改成你自己网站的侧边栏类、文章主体类。
效果出来了,必然少不了美化一下
.close-sidebar,.show-sidebar{float:right;margin:-5px 0 0 10px;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;background-image: -webkit-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -moz-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -ms-linear-gradient(top, #fbfbfb, #e6e6e6);border: 1px solid #ccc;border-bottom-color: #bbb;border-radius: 1px;box-shadow: 0 2px 2px #ddd;} .close-sidebar a,.show-sidebar a{color:#333;} .close-sidebar:hover,.show-sidebar:hover{background:#f6f6f6;} .close-sidebar:active,.show-sidebar:active{background:#f6f6f6;box-shadow: inset 0 2px 4px #ddd;}
这是简洁版!
感谢 imwangmin 投稿!
这个不错的啊
将jQuery中的width值更改为1330和950更好一点
不错
要是 代码能预览就好了
效果好像不是很兼容,有待提高
很厉害!学习了
厉害,用来试试看
不知道效果怎么样?
挺好的。大爱前端
用户头像如何调用
何必要关闭呢。蛮好看的。
写给特殊群体的,有人不需要侧边栏,萝卜青菜各有所爱吧!
学习了!
jquery的应用比较好做
请问一下浩子,上面的代码高亮显示,是用工具转换的,还是用插件来实现的?
http://www.daqianduan.com/tools/
这个福利挺不错,增加了体验度。
看来现在用的这个主题是很给力的
浩哥,问个问题,怎么修改wordpress后台登陆地方的logo图片?
哈哈 去掉侧边栏挺好
模板很大气
不错。我整合到我博客试试 😮
代码没换行,囧
什么代码没换行??
没了侧边栏,确实清爽很多。
不错,支持个~
好东西啊,拿来试试
😛 ,竟然审核通过了,谢谢浩兄!
千里迢迢跑来祝贺
😯 这个可以有
不错,楼主的 博客 不错,很舒心。。。看上去。。。
具体效果点击文章右上角试试吧~
有吗?没有!
这个是我投稿的文章,效果要去我的博客去看哦~
加上cookie记住选择的功能就更完美了, 不然关闭侧边栏刷新页面又出来了, 这样就没有意义了
嗯,我会考虑的
回复好神速 :)