【问题标题】:jquery sliding side bar right to left with resizing contentjquery从右到左滑动侧栏并调整内容大小
【发布时间】:2014-05-27 10:11:02
【问题描述】:

我正在尝试创建一个外观类似于下图的侧边栏。

http://i.imgur.com/AkFeEoh.png

正如你在图片中看到的,我想要一个默认打开的侧边栏,如果用户关闭它,cookie 将保存侧边栏是否打开。打开或关闭的侧边栏也会影响页面内容的大小,我尝试在我制作的模型中用 %'s 显示。

我一直在寻找类似的东西,但我能找到的最接近的是以下 jsfiddle,它是为另一个想要类似东西的用户制作的......但不完全相同。

jsfiddle.net/7ZBQa

谁能帮帮我,任何帮助将不胜感激 =)

【问题讨论】:

  • 这里是这个项目的基础jsfiddle.net/N8wLH 它是我希望能够切换的侧边栏,它记住它的位置
  • 我找到了我想要完成的完美示例,唯一的区别是我需要它完全相反的一面,并修复。 vb4.pixelgoose.com/forum.php?styleid=14 我会继续自己搞砸这个,直到我收到某人的回复 =)

标签: jquery html css sidebar collapse


【解决方案1】:

响应式设计所需的结果

HTML

<div class=" sidebar-at-left" id="main">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
    <a href="#" id="separator"></a>
    <div class="clearer">&nbsp;</div>
</div>

CSS

#content,#sidebar {
    line-height: 300px;
    text-align: center;
    border: 1px solid;
}

#sidebar {
    background-color: #DEF;
    border-color: #BCD;
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar #content {width: 64%;}
.use-sidebar #sidebar {
    display: block;
    width: 32%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-right #sidebar {margin-left: 1%;}

.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}
.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {float: left;}

#separator {
    background-color: #000;
    border: 1px solid #CCC;
    display: block;
    outline: none;
    width: 1%;
    margin-top: 145px;
}
.use-sidebar #separator {
    background: #000;
    border-color: #FFF;
    width:1%;
}
#separator:hover {
    border-color: #ABC;
    background: #DEF;
}

jQuery

<script>
$(document).ready(function(){
    // Variables
    var objMain = $('#main');

    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
    }

    // Hide sidebar
    function hideSidebar(){
        objMain.removeClass('use-sidebar');
    }

    // Sidebar separator
    var objSeparator = $('#separator');

    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');

});
</script>

DEMO

【讨论】:

  • 几乎但不完全是,我希望用mojotech.github.io/stickymojo 的效果修复侧边栏,并且还具有vb4.pixelgoose.com/forum.php?styleid=14 上侧边栏的折叠功能,最后我希望它记住用户是否折叠它或不使用cookie...我知道它的要求有点高,但我目前也在努力。只是还没到我想成为的样子,嘿,这看起来怎么样......我基本上只是从vb4.pixelgoose.com/forum.php?styleid=14 中删除了所有代码,并且只使用一个 div(内容)和一个......跨度>
  • 侧边栏框,虽然它被编码到 vbulletin 它有点难以剥离,但当我有一些不是代码抄袭的东西时,我会分享。除非有人可以事先用更简单的方法帮助我。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-04
  • 1970-01-01
  • 1970-01-01
  • 2012-04-23
  • 1970-01-01
相关资源
最近更新 更多