在 Blogger 中滑出侧边栏答案

【问题标题】：Slide out sidebar in Blogger在 Blogger 中滑出侧边栏
【发布时间】：2015-03-26 02:56:20
【问题描述】：

我想通过单击一个按钮让我的侧边栏滑出我的博客。我只能为动态视图找到这个，但肯定可以使用正确的代码来完成！我的网站是 bhyphen.com，任何帮助将不胜感激！

【问题讨论】：

【解决方案1】：

其实很简单。

这就是我在静态杂志模板中的做法。您可以在此处查看侧边栏的实时预览：http://kreatief-staticmagazinetemplate.blogspot.ch/

首先您需要添加一个新部分：

<div id='sidebar'>
  <a href="#search" class="toggle-link">x</a>
  <b:section class='sidebar' id='sidebarsection'>
  </b:section>
</div><!--/sidebar-->
<a class='toggle-link' href='#sidebar'><i class='fa fa-plus fa-lg'/></a>

所以我们有一个容器和一个锚点，它们将切换侧边栏。

然后注册该部分，以便您可以向其中添加小部件。

我确实在按钮中使用了 font-awesome，所以放置

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

在您页面的<head> 内。

当点击按钮时，我们将在菜单上切换一个活动类，因此我使用了一点 jQuery（最好搜索结束正文标记（</body>）并直接添加以下内容以上。

<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<!-- toggle active class -->
<script>
    //<![CDATA[
    $(document).ready(function(){
        $(".toggle-link").click(function(){
            $("#sidebar").toggleClass("active");
            $(".toggle-link").toggleClass("active");
        });
    });
    //]]>
</script>

然后用 CSS 结束。

把它放在 CSS 部分，在]]></b:skin>上方

我已经为模板设计器编写了变量定义，所以我也将其添加到其他变量定义中

<Group description="Sidebar and Toggle" selector="#sidebar, .toggle-link">
    <Variable name="sidebar.bg" description="Sidebar Background Color" type="color" default="#ffffff" value="#ffffff"/>
    <Variable name="sidebar.border" description="Sidebar Border Color" type="color" default="#333333" value="#333333"/>
    <Variable name="box.link.color" description="Box Link Color" type="color" default="#ffffff" value="#ffffff"/>
    <Variable name="box.link.bg" description="Box Link Background" type="color" default="#333333" value="#333333"/>
    <Variable name="box.hover.bg" description="Box Link Hover Background" type="color" default="#000000" value="#000000"/>
</Group>

如果您不想使用变量，只需将所有变量名称替换为您选择的颜色即可。

/*  Sidebar
/*-------------------------------*/
#sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    right: -304px;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    background-color: $(sidebar.bg);
    border-left: 4px solid $(sidebar.border);
    z-index: 15;
    overflow-y: auto;
}

.sidebar{
    width: 90%;
    padding: 0 5% !important;
}

.widget{
    max-width: 100%;
}

.toggle-link.active,
#sidebar.active {
    -webkit-transform: translate(-304px, 0px);
    transform: translate(-304px, 0px);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.toggle-link.active i{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: 1s ease;
    transition: 1s ease;
}

.toggle-link {
    position: fixed;
    top: 150px;
    right: 0px;
    width: 30px;
    height: 30px;
    background: $(box.link.bg);
    text-align: center;
    line-height: 30px;
    padding: 5px;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    z-index: 15;
    color: $(box.link.color);
}


#sidebar .toggle-link {
    display: none;
}

@media screen and (max-width: 350px){
    #sidebar .toggle-link {
        display: inline;
        position: relative;
        top: 0;
        right: -270px;
        padding: 5px 10px;
    }  
}

.toggle-link:hover {
    background: $(box.hover.bg);
}

.toggle-link i {
    -webkit-transition: 1s ease;
    transition: 1s ease;
    color: rgba(255, 255, 255, .8);
}

就是这样。

【讨论】：