将内容从左侧滑入，叠加现有内容并跨侧边栏

我目前正在构建一个响应式网站，我需要隐藏的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

将内容从左侧滑入，叠加现有内容并跨侧边栏

回答

相关问题