覆盖滑出菜单

Question

我有一个从右侧滑出的滑出菜单，但问题在于它将其余内容推到一侧，我不希望出现这种情况。

我希望它覆盖网站内容，以便用户仍然可以看到内容。我的继承人代码：

HTML：

<ul class="navigation"> 
<li class="nav-item"><a href="#">Home</a></li> 
<li class="nav-item"><a href="#">Portfolio</a></li> 
<li class="nav-item"><a href="#">About</a></li> 
<li class="nav-item"><a href="#">Blog</a></li> 
<li class="nav-item"><a href="#">Contact</a></li> 
</ul> 

<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<label for="nav-trigger"></label> 
// Site content 
<div class="site-wrap"></div> 

CSS：

.navigation { 
/* critical sizing and position styles */ 
width: 100%; 
height: 100%; 
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
z-index: 0; 

/* non-critical appearance styles */ 
list-style: none; 
background: #f8f8f8; 
} 

/* Navigation Menu - List items */ 
.nav-item { 
/* non-critical appearance styles */ 
width: 200px; 
float: right; 
border-top: 1px solid #111; 
border-bottom: 1px solid #000; 
} 

.nav-item a { 
/* non-critical appearance styles */ 
display: block; 
padding: 1em; 
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
color: white; 
font-size: 1.2em; 
text-decoration: none; 
transition: color 0.2s, background 0.5s; 
} 

.nav-item a:hover { 
color: #c74438; 
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%); 
} 

/* Site Wrapper - Everything that isn't navigation */ 
.site-wrap { 
/* Critical position and size styles */ 
    min-height: 100%; 
    min-width: 100%; 
    background-color: white; /* Needs a background or else the nav will show through */ 
    position: relative; 
    top: 0; 
    bottom: 100%; 
    left: 0; 
    right: 500px; 
    z-index: 1; 

    /* non-critical apperance styles */ 

    background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%); 
    background-size: 200%; 
    } 

/* Nav Trigger */ 
.nav-trigger { 
/* critical styles - hide the checkbox input */ 
position: absolute; 
clip: rect(0, 0, 0, 0); 
} 

label[for="nav-trigger"] { 
/* critical positioning styles */ 
position: absolute; 
top: 15px; 
right: 100px; 
z-index: 2; 

/* non-critical apperance styles */ 
height: 30px; 
width: 30px; 
cursor: pointer; 
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>"); 
background-size: contain; 
} 

/* Make the Magic Happen */ 
.nav-trigger + label { 
    transition: 0.2s; 
    } 

.nav-trigger:checked + label, .site-wrap { 
    right: 415px; 
    } 

.nav-trigger:checked ~ .site-wrap { 
    left: -300px; 
    border-right: 1px solid #e7e7e7; 
    } 


/* Micro reset */ 
    *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;} 
    html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif;   } 

继承人是什么样子现在：

任何帮助将不胜感激！

赫雷什上面的代码的一个工作科登笔：

http://codepen.io/coder26/pen/RaOGqZ

Answer 1

jQuery的

$(document).ready(function() { 

    $('#nav-trigger').click(function() { 

     $('#content').css({'left':'0'}); 

    }); 


}); 

CSS

#content { 
    position: fixed; 
} 

这里是更新codepen ：http://codepen.io/anon/pen/rebWYM

jQuery是最干净的解决方案，因为CSS本身不会这样做。您需要将内容ID附加到您添加到网站包装div中的任何其他内容。

Answer 2

在.site-wrap类中添加clear:left;，它应该适合您。

Answer 3

这应该使您更接近所需的解决方案。我设置了.navigation类的正确定义，并修改了.nav-trigger:checked ~ .site-wrap

请不要忘记将html部分中的内容移动到.site-wrap div。

.navigation { 
    /* critical sizing and position styles */ 

    width: 100px; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    /*left: 0;*/ 

    z-index: 0; 
    /* non-critical appearance styles */ 

    list-style: none; 
    background: #f8f8f8; 
} 
/* Navigation Menu - List items */ 

.nav-item { 
    /* non-critical appearance styles */ 

    width: 200px; 
    float: right; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #000; 
} 
.nav-item a { 
    /* non-critical appearance styles */ 

    display: block; 
    padding: 1em; 
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); 
    color: white; 
    font-size: 1.2em; 
    text-decoration: none; 
    transition: color 0.2s, background 0.5s; 
} 
.nav-item a:hover { 
    color: #c74438; 
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(75, 20, 20, 0.65) 100%); 
} 
/* Site Wrapper - Everything that isn't navigation */ 

.site-wrap { 
    /* Critical position and size styles */ 

    min-height: 100%; 
    min-width: 100%; 
    background-color: white; 
    /* Needs a background or else the nav will show through */ 

    clear: left; 
    position: fixed; 
    top: 0; 
    bottom: 100%; 
    left: 0; 
    right: 500px; 
    z-index: 1; 
    /* non-critical apperance styles */ 

    background-image: linear-gradient(135deg, rgb(254, 255, 255) 0%, rgb(221, 241, 249) 35%, rgb(160, 216, 239) 100%); 
    background-size: 200%; 
} 
/* Nav Trigger */ 

.nav-trigger { 
    /* critical styles - hide the checkbox input */ 

    position: fixed; 
    clip: rect(0, 0, 0, 0); 
} 
label[for="nav-trigger"] { 
    /* critical positioning styles */ 

    position: fixed; 
    top: 15px; 
    right: 100px; 
    z-index: 2; 
    /* non-critical apperance styles */ 

    height: 30px; 
    width: 30px; 
    cursor: pointer; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>"); 
    background-size: contain; 
} 
/* Make the Magic Happen */ 

.nav-trigger + label { 
    transition: 0.2s; 
} 
.nav-trigger:checked + label, 
.sitewrap { 
    right: 415px; 
} 
.nav-trigger:checked ~ .site-wrap { 
    /*left: -300px;*/ 

    position: fixed; 
    border-right: 1px solid #e7e7e7; 
    z-index: -333; 
} 
/* Micro reset */ 

*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
html, 
body { 
    height: 100%; 
    width: 100%; 
    font-family: Helvetica, Arial, sans-serif;