字号: - o +

关闭/显示侧边栏简洁版

2012-11-06 杂七杂八 10人评论 30,714次浏览   

子曰:把希望建筑在意欲和心愿上面的人们,二十次中有十九次都会失望 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

默认显示”关闭侧边栏”,点击”关闭侧边栏”,侧边栏消失,显示”显示侧边栏”,具体效果点击文章右上角试试吧~

代码如下:在你需要的位置添加

<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;}

这是简洁版…更多版本百度,谷歌去吧~

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论6条 ,博主回复4

  1. background-image: -moz-linear-gradient(top, #fbfbfb, #e6e6e6);这个属性是什么意思?

  2. Jquery 代码放到哪个文件里呢?【新人不懂Jqyery】

    杳耳怠然09-14 10:32 回复
  3. :mrgreen: 这效果不错,收藏一下

    kslr12-19 05:59 回复
  4. 我来啦~~我来啦~~第一次来~~有时间欢迎来我的地盘吐槽哈~~

  5. 总感觉收回的时候怪怪的,是不是先把宽度变回来之后再执行右侧显示会好一点?

    王叨叨 11-07 13:35 回复
  6. 这个我也要加

    IT自习室11-07 08:38 回复

发表我的评论

*

*

取消