Question

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

Answer 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);
}

就是这样。

在Blogger中滑出边栏

1 个答案: