將內容從左側滑入，疊加現有內容並跨側邊欄

我目前正在構建一個響應式網站，我需要隱藏的div，單擊左側欄中的按鈕後會從左側滑入。一旦按下此按鈕，側欄會從滑動內容中滑過（從左側滑動），並覆蓋現有內容或將內容推向右側。將內容從左側滑入，疊加現有內容並跨側邊欄

這是問題所在，因爲它是一個響應網站。當新div滑入時，我希望'siteInnerLeft'div中的側邊欄被推到頁面的右側。因此，在內容滑過之前的內容之後，不再可見，直到滑動內容已經滑回出。

這裏是我的jsfiddle - http://jsfiddle.net/76xvB/2/

Hopefuly你可以看到我想要acheive。我已經管理好它的工作，直到一個點，但我的問題是滑動的內容是固定的，我不希望它被修復，因爲有更多的內容要查看，這將刪除用戶的滾動能力。

我知道'position fixed'將元素從文檔流中取出。那麼這是否會阻止我實現我想要的？如果是這樣，是否有另一種方式來做到這一點。

注意：真正的網站將有百分比而不是像素，因爲它是響應式的，這是一個細分版本。

我當前的代碼：

HTML

<div id="siteWrapper"> 
    <div id="siteInnerLeft"> 
     <div id="homeNavLink"> 
      <p>Click me</p> 
     </div> 
    </div> 
    <div id="siteInnerRight"> 
     <div class="pushmenu-push"> 
      <p>Current page content</p> 
     </div> 
     <div class="pushmenu pushmenu-left"> 
      <p>Content to slide in from the left</p> 
     </div> 
     <div id="footer"> 
      <p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p> 
     </div> 
    </div>  
</div>

CSS

#siteWrapper{ 
    max-width:500px; 
    margin:0 auto; 
    width:100%;  
} 

#siteInnerLeft{ 
    background-color:green; 
    width:100px; 
    float:left; 
    position:fixed; /* Sidebar that needs to be fixed*/ 
} 

#siteInnerRight{ 
    width: 400px; 
    background-color:yellow; 
    float:left; 
    margin-left: 100px; /*Compensates for fixed header width */ 
} 

.pushmenu { 
    background: #e9e8e0; 
    font-family: georgia,times news roman, times, serif; 
    position: fixed; 
    width:400px; 
    height: 100%; 
    top: 0; 
    z-index: 1000; 
} 


.pushmenu-push{ 
    left: 0; 
    overflow-x: hidden; 
    position: relative; 
    width: 100%; 

} 

.pushmenu-left{ 
    left:-400px; 
} 

.pushmenu-left.pushmenu-open { 
     left: 0px; 
     /* box-shadow: 5px 5px 5px #d9d8d0;*/ 
} 

.pushmenu, .pushmenu-push { 
    transition: all 0.3s ease 0s; 
} 

#footer{ 
    width:100%; 
    clear:both; 
    background-color:red; 
}

jQuery的

$menuLeft = $('.pushmenu-left'); 
$nav_list = $('#homeNavLink'); 

$nav_list.click(function() { 
    $(this).toggleClass('active'); 
    $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
    $menuLeft.toggleClass('pushmenu-open'); 
});

任何建議將不勝感激。

謝謝。

來源

2014-02-10 JDavies

只是給大家一個提示，JavaScript中的最後一行應該切換類pushmenu-left而不是pushmenu-打開 – isick

jsFiddle示例在FF或Safari上不適用於我... –

完成transition後，更改側邊欄的position，以便它不再更長fixed。以下鏈接答案休息下來非常好，有質量的引用： Callback when CSS3 transition finishes

來源

2014-02-10 17:07:04

感謝您的回覆。側邊欄並不是真正導致問題的原因。這是從左側滑入的內容。因爲這是固定的，我不希望它是。 – JDavies

http://jsfiddle.net/Bushwazi/76xvB/3/ ==>絕對。 –

這樣更好，雖然頁腳需要位於頂部的內容之下，但是滑入頁面左側的內容需要將側欄推到頁面的右側。並且位於頁面上當前內容的上方。對於頁腳來調整它的高度並坐在剛剛滑入的側欄下。 – JDavies

如果側邊欄是固定的，你可以創建內容的滾動條裏面，這樣的文字可以觀看;你可以通過在.pushmenu css類中添加overflow-y: auto;來實現。

另一種方法是將邊欄設置爲position: absolute;，然後在用戶點擊邊欄的底部時動態更改JavaScript中的top屬性。

來源

2014-02-10 17:07:39 IoviX

將內容從左側滑入，疊加現有內容並跨側邊欄

回答

相關問題