关注前端开发
关注用户体验

关闭/显示侧边栏简洁版(适用于大前端主题)

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

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

<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 投稿!

未经允许不得转载:大前端 » 关闭/显示侧边栏简洁版(适用于大前端主题)
分享到:更多 ()

评论 38

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #28

    这个不错的啊

    赢在大学励志网2年前 (2014-12-26)回复
  2. #27

    将jQuery中的width值更改为1330和950更好一点

    梦想家2年前 (2014-11-18)回复
  3. #26

    不错

    xxxx3年前 (2013-12-20)回复
  4. #25

    要是 代码能预览就好了

    GEEK-AK3年前 (2013-09-04)回复
  5. #24

    效果好像不是很兼容,有待提高

    app界面设计4年前 (2013-05-23)回复
  6. #23

    很厉害!学习了

    25学堂4年前 (2013-05-23)回复
  7. #22

    004年前 (2013-05-11)回复
  8. #21

    厉害,用来试试看

    wordpress教程网4年前 (2013-04-06)回复
  9. #20

    不知道效果怎么样?

    womenhhde@163.com4年前 (2013-03-14)回复
  10. #19

    挺好的。大爱前端

    mygood@126.com4年前 (2013-03-05)回复
  11. #18

    用户头像如何调用

    Anguseleven4年前 (2013-02-19)回复
  12. #17

    何必要关闭呢。蛮好看的。

    wmtimes4年前 (2013-01-18)回复
    • 写给特殊群体的,有人不需要侧边栏,萝卜青菜各有所爱吧!

      imwangmin4年前 (2013-01-26)回复
  13. #16

    学习了!

    YY4年前 (2013-01-09)回复
  14. #15

    jquery的应用比较好做

    泰安香椿苗4年前 (2013-01-07)回复
  15. #14

    请问一下浩子,上面的代码高亮显示,是用工具转换的,还是用插件来实现的?

    hicoogle4年前 (2013-01-06)回复
  16. #13

    这个福利挺不错,增加了体验度。 :mrgreen:

    白某人4年前 (2013-01-02)回复
  17. #12

    看来现在用的这个主题是很给力的

    指尖上的文艺青年4年前 (2012-12-28)回复
  18. #11

    浩哥,问个问题,怎么修改wordpress后台登陆地方的logo图片?

    小强4年前 (2012-12-28)回复
  19. #10

    哈哈 去掉侧边栏挺好

    wordpress教程网4年前 (2012-12-28)回复
  20. #9

    模板很大气

    兰诺儿怎么样4年前 (2012-12-27)回复
  21. #8

    不错。我整合到我博客试试 😮

    divcss教程4年前 (2012-12-27)回复
  22. #7

    代码没换行,囧

    大发4年前 (2012-12-27)回复
  23. #6

    没了侧边栏,确实清爽很多。

    waiting-无限博客4年前 (2012-12-26)回复
  24. #5

    不错,支持个~

    子痕4年前 (2012-12-26)回复
  25. #4

    好东西啊,拿来试试

    wordpress教程网4年前 (2012-12-26)回复
  26. #3

    😛 ,竟然审核通过了,谢谢浩兄!

    imwangmin4年前 (2012-12-26)回复
  27. #2

    😯 这个可以有

    小林4年前 (2012-12-26)回复
    • 不错,楼主的 博客 不错,很舒心。。。看上去。。。

      Anguseleven4年前 (2013-02-17)回复
  28. #1

    具体效果点击文章右上角试试吧~
    有吗?没有!

    不错呢4年前 (2012-12-26)回复
    • 这个是我投稿的文章,效果要去我的博客去看哦~

      imwangmin4年前 (2012-12-28)回复
      • 加上cookie记住选择的功能就更完美了, 不然关闭侧边栏刷新页面又出来了, 这样就没有意义了

        aisin4年前 (2012-12-28)回复
        • 嗯,我会考虑的

          imwangmin4年前 (2012-12-28)
        • 回复好神速 :)

          aisin4年前 (2012-12-28)

themebetter 国内更好的WordPress主题服务商

立即前往