搜索
查看: 27|回复: 0

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

[复制链接]
发表于 2018-6-30 14:58:24 | 显示全部楼层 |阅读模式
默认显示”关闭侧边栏”,点击”关闭侧边栏”,侧边栏消失,显示”显示侧边栏”,具体效果点击文章右上角试试吧~
代码如下:在你需要的位置添加
class="close-sidebar"> href="#">关闭侧边栏>>
class="show-sidebar" style="display:none;"> href="#">显示侧边栏>>
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 投稿!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

菜鸟论坛

菜鸟论坛-致力于个人网站发展的草根站长联盟,为广大从事互联网工作、前端开发、个人站长、网站搭建、SEO优化、网络运营以及其他领域的个人草根站长同学提供一个免费公益性的信息交流与资源分享的站长平台。

微信公众号

联系我们

  • 广告合作
  • QQ:542750839

QQ|手机版|小黑屋|菜鸟论坛 ( 鲁ICP备17013748号 )|网站地图

Powered by Discuz! X3.4 © 2018 MZHENG.CN

快速回复 返回顶部 返回列表