Emlog如何开启关闭侧边栏教程

2017-9-26 0 PHP代码 蓝优

本次教程由蓝优网转载发布,教程如下:

首先在文章页面 echo_log.php 中需要的地方添加:

<div class="close-sidebar" data-original-title="显示/关闭侧边栏"><a href="javascript:;">关闭侧边栏</a></div>
<div class="show-sidebar" data-original-title="显示/关闭侧边栏" style="display:none;"><a href="javascript:;">显示侧边栏</a></div>
 其次在CSS 文件里面添加:
.close-sidebar,.show-sidebar{float:right;margin:-65px -13px 0 0;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;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;}
最后在JS文件里面添加:
jQuery(document).ready(function($){
$('.close-sidebar').click(function(){
 $('.close-sidebar,.sidebar').hide();
 $('.show-sidebar').show();
 $('.content').animate({
 width: "1200px"
 },
 1000);})
$('.show-sidebar').click(function(){
 $('.show-sidebar').hide();
 $('.close-sidebar').show();
 setTimeout(function () {$('.sidebar').show();}, 1000);
 $('.content').animate({
 width: "820px"
 },
 1000);})
});


标签: EMLOG教程 转载
版权声明:若无特殊注明,本文皆《蓝优》原创,转载请保留文章出处。
本文链接:Emlog如何开启关闭侧边栏教程 - http://www.92mo.cn/daima/13.html

发表新评论

快捷功能: