从右侧的页面滑动

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; 
}