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

现在看起来像是什么：

非常感谢任何帮助！

上面代码中有一个正常工作的Coden Pen：

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

Answer 1

的jQuery

$(document).ready(function () {

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

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

    });


});

CSS

#content {
    position: fixed;
}

以下是更新后的代码集：http://codepen.io/anon/pen/rebWYM

jQuery是最干净的解决方案，因为单凭CSS无法实现。您需要将内容ID附加到您添加到site-wrap div中的任何其他内容。

Answer 2

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

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;

叠加幻灯片菜单

3 个答案: