jquery滑动侧栏从右到左调整内容 [英] jquery sliding side bar right to left with resizing content
问题描述
我尝试创建一个外观类似于以下图片的侧边栏。
I am trying to create a side bar with the appearance similar to the following image.
http://i.imgur.com/AkFeEoh.png
如图所示,我想要一个边栏默认情况下打开,如果用户关闭它一个cookie将保存边栏是否打开。侧边栏打开或关闭也会影响页面内容的大小,我试图在我做的模型中显示%。
As you can see in the image, I want a sidebar that is by default open and if the user closes it a cookie will save whether or not the sidebar is open. The sidebar being opened or closed would also effect the size of the page content, which I tried to show with %'s in the mockup I made.
我一直在搜索周围有类似的东西,但最接近我可以找到的是下面的jsfiddle为另一个用户想要类似的东西,但不完全相同。
I have been searching around for something similar, but the closest I can find is the following jsfiddle made for another user who wanted something similar... but not quite the same.
jsfiddle.net / 7ZBQa
jsfiddle.net/7ZBQa
任何人都可以帮助我,任何帮助将非常感谢=)
can anyone please help me with this, any help would be much appreciated =)
推荐答案
需要响应式设计的结果
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"> </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>
这篇关于jquery滑动侧栏从右到左调整内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!