Question

所以对于咯咯笑声，我试图弄清楚如何制作这些抽屉滑块之一，我得到了大部分内容，但是当汉堡包菜单被切换时，标题栏被移动，导致汉堡包的一些奇怪的扭曲菜单。

我正在寻找的是当点击汉堡包菜单时，导航栏从屏幕滑出到整个页面顶部的指定宽度。绝不应该围绕它移动页面。

当然，替代方案是让它在整个页面移动时移动......但是如果可以的话，我想避免这样做。

HTML

 <body>
      <input type="checkbox" id="nav_drawer" name="" value="">
      <div id="wrapper">
        <label for="nav_drawer" class="nav_drawer_toggle">&#x2261;</label>

<header class="logo"><h1><a id="nav_logo" href="/index.php">This is my placeholder Title</a></h1></header>

<nav class="navigation">
   <ul>
      <li><a class="nav_link" href="#">Home</a></li>
      <li><a class="nav_link" href="#">1</a></li>
      <li><a class="nav_link" href="#">2</a></li>
      <li><a class="nav_link" href="#">3</a></li>
      <li><a class="nav_link" href="#">4</a></li>
      <li><a class="nav_link" href="#">5</a></li>
      <li><a class="nav_link" href="#">6</a></li>                
   </ul>
</nav>
</div>

CSS

*{
   margin: 0;
   padding: 0;
}

html,body{
   font-family: 'PT Sans', sans-serif;
   background-color: black;
   color: white;
}

#wrapper{
   margin: 0 auto;
   min-width: 320px;
   max-width: 1600px;
   position: relative;
   z-index: 0;
}

h1,h2,h3,h4,h5,h6{
   color:#FEBC11;
   text-align: center;
}

header #nav_logo{
   border-bottom: none; 
   background-color: transparent;
   text-decoration: none;
   color:#FEBC11;
}

header.logo h1{
   text-align: left;
   padding-left: .5rem; 
   font-size: 1rem;
   padding-bottom: 1rem;
   padding-top: 1rem;
   background-color: #333;
}

.logo{
   position: relative;
   z-index: 0;
}

.navigation{
   position:fixed;
   top: 3.25rem;
   bottom: 0px;
   left: -190px;
   z-index: 0;
   background-color: white;
   transition: all .5s ease-in-out;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
}

.navigation li{
   width: 10rem; 
}

.navigation li .nav_link{
   display: block;
   color: white;
   background-color: blue;
   text-decoration: none;
   padding: .5rem;
   border-bottom: 1px solid red;
   text-align: center;
}

.navigation li a:hover{
   color: red;
}

.navigation li a.current{
   background-color: pink;
}

#nav_drawer{
   display: none;
}

#nav_drawer:checked + #wrapper .navigation{
   left: 0px;
}

#nav_drawer:checked + #wrapper .nav_drawer_toggle
{
   left: 200px;
}

#nav_drawer:checked + #wrapper .logo{
   padding-left: 180px;
}

.nav_drawer_toggle{
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   background: none;
   border: 0;
   color: white;
   font-weight: bold;
   cursor: pointer;
   margin-top: .4rem;
   margin-right: 1rem;
   font-size: 2rem;
   z-index: 1; 
}

.nav_drawer_toggle:hover{
   color:#FEBC11;
}

这是一个证明我的意思的方法。按下汉堡包图标，您应该看到我所指的内容。

https://jsfiddle.net/qbqthjwm/

Answer 1

删除这两个属性，当你切换它时，你将拥有100％宽度的标题和右侧的汉堡包。

#nav_drawer:checked + #wrapper .nav_drawer_toggle
{
   left: 200px;
}

#nav_drawer:checked + #wrapper .logo{
   padding-left: 180px;
}

Updated JSFiddle

导航抽屉扭曲标题栏

1 个答案: