1. 首页
  2. 技术
  3. 前端

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

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

2012-12-26
分类:技巧资源
阅读(38027)
评论(38)

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

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

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

AD:
【专业网站开发】
7年网站开发经验 / 高端大气用户体验 / 全设备自适应兼容 / 免费靠谱工单售后
赞(1) 未经允许不得转载:
大前端 »
关闭/显示侧边栏简洁版(适用于大前端主题)
分享到:








更多
(
0
) 标签:
jQuery
前端技巧
关闭/显示侧边栏简洁版(适用于大前端主题)

上一篇
大前端投稿功能上线 来发你的文章吧

下一篇
糗事百科招聘前端开发工程师

相关推荐

评论 38

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

取消

有人回复时邮件通知我

提交评论

  • 昵称昵称 (必填)
  • 邮箱邮箱 (必填)
  • 网址网址
  1. #28 关闭/显示侧边栏简洁版(适用于大前端主题)

    这个不错的啊

    赢在大学励志网4年前 (2014-12-26) 回复

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

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

    梦想家4年前 (2014-11-18) 回复

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

    不错

    xxxx5年前 (2013-12-20) 回复

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

    要是 代码能预览就好了

    GEEK-AK5年前 (2013-09-04) 回复

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

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

    app界面设计5年前 (2013-05-23) 回复

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

    很厉害!学习了

    25学堂5年前 (2013-05-23) 回复

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

    005年前 (2013-05-11) 回复

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

    厉害,用来试试看

    wordpress教程网5年前 (2013-04-06) 回复

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

    不知道效果怎么样?

    womenhhde@163.com6年前 (2013-03-14) 回复

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

    挺好的。大爱前端

    mygood@126.com6年前 (2013-03-05) 回复

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

    用户头像如何调用

    Anguseleven6年前 (2013-02-19) 回复

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

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

    wmtimes6年前 (2013-01-18) 回复

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

      写给特殊群体的,有人不需要侧边栏,萝卜青菜各有所爱吧!

      imwangmin6年前 (2013-01-26) 回复

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

    学习了!

    YY6年前 (2013-01-09) 回复

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

    jquery的应用比较好做

    泰安香椿苗6年前 (2013-01-07) 回复

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

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

    hicoogle6年前 (2013-01-06) 回复

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

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

    白某人6年前 (2013-01-02) 回复

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

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

    指尖上的文艺青年6年前 (2012-12-28) 回复

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

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

    小强6年前 (2012-12-28) 回复

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

    哈哈 去掉侧边栏挺好

    wordpress教程网6年前 (2012-12-28) 回复

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

    模板很大气

    兰诺儿怎么样6年前 (2012-12-27) 回复

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

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

    divcss教程6年前 (2012-12-27) 回复

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

    代码没换行,囧

    大发6年前 (2012-12-27) 回复

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

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

    waiting-无限博客6年前 (2012-12-26) 回复

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

    不错,支持个~

    子痕6年前 (2012-12-26) 回复

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

    好东西啊,拿来试试

    wordpress教程网6年前 (2012-12-26) 回复

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

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

    imwangmin6年前 (2012-12-26) 回复

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

    😯 这个可以有

    小林6年前 (2012-12-26) 回复

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

      不错,楼主的 博客 不错,很舒心。。。看上去。。。

      Anguseleven6年前 (2013-02-17) 回复

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

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

    不错呢6年前 (2012-12-26) 回复

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

      这个是我投稿的文章,效果要去我的博客去看哦~

      imwangmin6年前 (2012-12-28) 回复

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

        加上cookie记住选择的功能就更完美了, 不然关闭侧边栏刷新页面又出来了, 这样就没有意义了

        aisin6年前 (2012-12-28) 回复

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

          嗯,我会考虑的

          imwangmin6年前 (2012-12-28)

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

          回复好神速 :)

          aisin6年前 (2012-12-28)

原创文章,作者:曾确令,如若转载,请注明出处:https://www.zengqueling.com/%e5%85%b3%e9%97%ad-%e6%98%be%e7%a4%ba%e4%be%a7%e8%be%b9%e6%a0%8f%e7%ae%80%e6%b4%81%e7%89%88%e9%80%82%e7%94%a8%e4%ba%8e%e5%a4%a7%e5%89%8d%e7%ab%af%e4%b8%bb%e9%a2%98/

联系我们

15602395067

在线咨询:点击这里给我发消息

邮件:eden7@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code