[英]How to right align a slide out panel for all screen sizes?
I am trying to right align the panel so it works with bootstrap, and so it works for all screen sizes. 我试图将面板正确对齐,以便它与引导程序一起使用,因此它适用于所有屏幕尺寸。 The left align works for all screen sizes.
左对齐适用于所有屏幕尺寸。 How can I make this work for the right align?
如何使这项工作正确对齐?
Javascript 使用Javascript
$('#opener').on('click', function() {
var panel = $('#slide-panel');
if (panel.hasClass("visible")) {
panel.removeClass('visible').animate({'margin-left':'100%'});
} else {
panel.addClass('visible').animate({'margin-left':'90%'});
}
return false;
});
CSS CSS
#slide-panel {
width:300px;
height:300px;
padding:10px;
background:#eee;
margin-left:100%;
}
#opener {
float:left;
margin:-10px -50px 0px -50px;
border-radius:0;
}
HTML HTML
<div id="slide-panel">
<a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
Panel Content
</div>
Making a side panel can be done with the following steps: 可以通过以下步骤完成侧面板的制作:
position: absolute
or position: fixed
position: absolute
或position: fixed
top: 0
and right: -N
where N is the width of the panel top: 0
, right: -N
,其中N是面板的宽度 right
to 0
right
以0
overflow-x: hidden
on the body and html overflow-x: hidden
在正文和html上 This only works if the width of the side panel is constant. 仅在侧面板的宽度恒定时才有效。
Here's the Fiddle: http://jsfiddle.net/acbabis/ZnNHk/ 这是小提琴: http : //jsfiddle.net/acbabis/ZnNHk/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.