從右側的頁面滑動

Question

好吧，所以我試圖建立一個右側頁面滑動效果與兩個狀態，在滑動面板的初始打開我想顯示菜單和選擇菜單項我想擴大箱子開放更大，並顯示該信息。

發現它很難準確描述我正在嘗試做什麼，因爲我之前沒有看到它，但幾乎在打開第一個div時，它的高度爲100px，寬度爲200px，在選擇右邊的動畫時該容器中的一個鏈接，我希望它擴大另一個div浮到它的左側，並擴大出更多的框。這有意義嗎？在別的地方也這樣或一些JavaScript得到這個工作的任何鏈接，將不勝感激......我的繼承人至今編碼：

HTML：

<div id="enquirypost"> 

<div style="width:200px;"> 
<a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a> 
<br /> 
<br /> 
Menu<br /> 
<a href="#" style="color:#fff; text-decoration:none;">Close</a> 
</div> 

<div id="extra">test</div> 


</div> 

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a> 

CSS：

body{margin:0;} 
#enquirypost { 
     height:100%; 
     overflow:hidden; 
     z-index:1000; 
     width:0px; 
     float:right; 
     background:#ccc; 
     font-size:20px; 
     line-height:65px; 
     position:absolute; 
     top:0px; 
     right:0px; 
     color:#FFF; 
     text-align:center; 
     -webkit-transition:all 0.5s ease; 
     -moz-transition:all 0.5s ease;} 
#enquirypost:target 
{ 
    bottom:0px; 
    overflow:auto; 
    min-width:200px; 
    height: 100%; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
} 

#extra { 
     height:100%; 
     overflow:hidden; 
     z-index:1000; 
     width:0px; 
     float:right; 
     background:#000; 
     font-size:20px; 
     line-height:65px; 
     position:absolute; 
     top:0px; 
     right:0px; 
     color:#FFF; 
     text-align:center; 
     -webkit-transition:all 0.5s ease; 
     -moz-transition:all 0.5s ease;} 
#extra:target 
{ 
    bottom:0px; 
    overflow:auto; 
    min-width:400px; 
    height: 100%; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
} 

並繼承人jsfiddle

Answer 1

#enquirypost以外的#Extra更多。

http://jsfiddle.net/davidja/wFutQ/15/

<div id="enquirypost"> 

    <div style="width:200px;"> 
    <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a> 
    <br /> 
    <br /> 
    Menu<br /> 
    <a href="#" style="color:#fff; text-decoration:none;">Close</a> 
    </div> 




    </div> 

    <a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a> 

    <div id="extra">test</div> 

Answer 2

看看當您將#extra div放在#enquirypost div之外時會發生什麼。我不確定這是你想要的，但是當我在你的jsFiddle中嘗試這個時，它肯定看起來更好。

另外：當你使用position：absolute時，float屬性是無用的，我會刪除它來清理代碼。而且您可能希望包含「-o-transition」和「transition」以確保您的頁面在每個瀏覽器上正確顯示。

Answer 3

我認爲我有你要找的解決方案：

http://jsfiddle.net/wFutQ/17/

棘手的部分是你把DIV這是 「子菜單」 分區，這是「前菜單」。然後，您可以使用css選擇器.submenu:target + .menu {，它可以在子菜單被鎖定的情況下保持菜單打開。

您還可以做更多更深的subsubmenu同時保持子菜單和菜單與.subsubmenu:target + .submenu和.subsubmenu:target + .submenu + .menu選擇

我的HTML代碼打開（抱歉，但我加了幾節課，其中一些現在不使用）：

<div> 

    <div id="extra" class="menuPart submenu"> 
      <div class="content">test</div> 
    </div> 

    <div id="enquirypost" class="menuPart menu"> 
     <div class="content"> 
      <a href="#extra" style="color:#999; text-decoration:underline;">Extra Expand</a> 
      <br /> 
      <br /> 
      Menu<br /> 
      <a href="#" style="color:#fff; text-decoration:none;">Close</a> 
     </div> 
    </div> 

</div> 

<a href="#enquirypost" style="color:#999; text-decoration:underline;">Login/Register</a> 

我的CSS代碼：

body { 
    margin:0; 
} 

.menuPart { 
    height: 100%; 
    width: 0px; 
    font-size:20px; 
    line-height:65px; 
    position:absolute; 
    color: #FFF; 
    text-align: center; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
} 

.menu:target { 
    overflow: auto; 
    min-width: 200px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
} 

.submenu:target + .menu { 
    overflow: auto; 
    min-width: 200px; 
} 

.submenu:target { 
    overflow: auto; 
    min-width: 200px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    padding-right: 200px; 
} 

#enquirypost { 
    background: #CCC; 
    right: 0px; 
} 

#extra { 
    background: #000; 
    right: 0px; 
}