代码如下：在你需要的位置添加
|
1 2 |
<div class="close-sidebar"><a href="#">关闭侧边栏</a></div> <div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div> |
jQuery代码：添加到header.php或footer.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
jQuery(document).ready(function($) { $(’.close-sidebar’).click(function() { $(’.close-sidebar,.sidebar’).hide(); $(’.show-sidebar’).show(); $(’.content’).animate({ width: "1280px" }, 1000); }); $(’.show-sidebar’).click(function() { $(’.show-sidebar’).hide(); $(’.close-sidebar,.sidebar’).show(); $(’.content’).animate({ width: "865px" }, 1000); }); }); |
其中.sidebar/.content改成当前主题中使用的侧边栏类、文章主体类，width:"1280px"关闭边侧栏之后的宽度、width:"865px"是未关闭之前的
CSS美化
|
1 2 3 4 |
.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;} |
文章评论