使用菜單移動內容

Question

我已經使自己成爲我打算使用的滑出菜單，但是我遇到了一些麻煩，因爲當菜單暴露時，無法將頁面的內容移動到左側。菜單與頁面上的內容重疊使其無法閱讀，我知道這可能是一個JavaScript問題，但我試圖尋找解決方案並且已經縮短了。

的JavaScript

$(document).ready(function() { 

變種slideWidth = $（ '＃pageslide'）outerWidth（）;

$（ 'slideIt，#pageslide a。關閉。 '）上（ 「點擊」，函數（）{ $（' slideIt。 '）toggleClass（' 活動'）;

if($('#pageslide').is(':visible')) { 
    $('#pageslide').animate({ 
    right: '-'+slideWidth 
    }, 400, function(){ 
    $('#pageslide').hide(); 
    }); 
    $('.wrapper').animate({ 
    marginRight: '0' 
    }, 400); 
} 
else{ 
    $('#pageslide').show().animate({ 
    right: '0' 
    }, 400); 
    $('.wrapper').animate({ 
    marginRight: slideWidth 
    }, 400); 
} 

http://jsfiddle.net/ujyj24op/1/

Answer 1

按照代碼可能會幫助你。

$(document).ready(function() { 
 

 
    var slideWidth = $('#pageslide').outerWidth(); //grab width of the sliding menu so that this can be controlled in the css only 
 

 
    $('.slideIt, #pageslide a.close').on("click", function(){ //click function 
 
    $('.slideIt').toggleClass('active'); //toggle the active close vs open icon 
 
    
 
    if($('#pageslide').is(':visible')) { //if visible then hide it 
 
     $('#pageslide').animate({ 
 
     right: '-'+slideWidth 
 
     }, 400, function(){ 
 
     $('#pageslide').hide(); 
 
     }); 
 
     $('.wrapper, #text').animate({ 
 
     marginRight: '0' 
 
     }, 400); 
 
    } 
 
    else{        //else show it 
 
     $('#pageslide').show().animate({ 
 
     right: '0' 
 
     }, 400); 
 
     $('.wrapper, #text').animate({ 
 
     marginRight: slideWidth 
 
     }, 400); 
 
    } 
 
     
 
    }); 
 

 
});

body{ 
 
    background-color:rgb(204,204,204); 
 
} 
 
a{ 
 
    display:block; 
 
} 
 
#text{ 
 
    position:absolute; 
 
    width:150px; 
 
    top:200px; 
 
    right:100px; 
 
} 
 
.slideItWrapper{ 
 
    position:relative; 
 
} 
 
.wrapper{ 
 
    position:absolute; 
 
    top:110px; 
 
    right:100px; 
 
} 
 
.menu-item{ 
 
    @include transition-property(all); 
 
    @include transition-duration(0.2s); 
 

 
    display:block; 
 
    width:25px; 
 
    height:1px; 
 
    margin:0 0 7px; 
 
    background:rgba(0,0,0,0.8); 
 
} 
 

 
#pageslide { 
 
    display:none; 
 
    position:absolute; 
 
    position:fixed; 
 
    top:0; 
 
    overflow:scroll; 
 
    height:100%; 
 
    z-index: 999999; 
 
    width:340px; 
 
    
 
    background: rgba(255,255,255,0.7); 
 
    right:-340px; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <a href="#" class="slideIt"> 
 
    \t <span class="menu-item"></span> 
 
    \t \t <span class="menu-item"></span> 
 
    \t \t <span class="menu-item"></span> 
 
    \t \t </a> 
 
</div> 
 
<aside id="pageslide"> 
 
<div id="modal"> 
 
    <h3>Menu!</h3> 
 
    <ul> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    <li><a href="">Link</a></li> 
 
    </ul> 
 
</div> 
 
</aside> 
 
</div> 
 
<div id="text"><p>hello this is my placeholder text lets see if you move please move beause I will be annoyed if you don't</p></div>

Answer 2

嘗試添加#text節也到幻燈片funtion顯示，然後它會在儘可能多的幻燈片將內容側的內容 例：

else{        //else show it 
    $('#pageslide, #text').show().animate({ 
    right: '0' 
    }, 400); 
    $('.wrapper, #text').animate({ 
    marginRight: slideWidth 
    }, 400); 
} 

然後可以稍微修改一下，但會給你一個關於如何去做的想法。 （單程）與你已有的代碼。