如何对所有屏幕尺寸的滑出面板进行右对齐

How to right align a slide out panel for all screen sizes?

本文关键字：右对齐 屏幕      更新时间：2023-09-26

我试图右对齐面板，使其与引导工作，所以它适用于所有屏幕尺寸。左对齐适用于所有屏幕尺寸。我怎样才能使这个工作为正确的对齐?

小提琴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 

#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 

<div id="slide-panel">
    <a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    Panel Content
</div>

制作侧板可以通过以下步骤完成:

  • 设置面板为position: absolute或position: fixed
  • 使面板为top: 0和right: -N，其中N为面板的宽度
  • 显示面板设置right到0
  • 要使它没有滚动条，在body和html
    • 上设置overflow-x: hidden

这只适用于侧板的宽度是恒定的。

这里是小提琴:http://jsfiddle.net/acbabis/ZnNHk/

相关文章：