Nav drawer, искажающий строку заголовка

Итак, для хихиканья я пытался выяснить, как сделать один из этих ползунков выдвижного ящика, и я получил большинство из них, за исключением того, что, когда меню гамбургеров переключается, строка заголовка перемещается, в результате чего некоторые странное искажение меню гамбургера.Nav drawer, искажающий строку заголовка

Что я ищу, когда нажата кнопка гамбургера, навигационная панель открывается с экрана до указанной ширины поверх всей страницы. Ни в коем случае не следует перемещать страницу вокруг нее.

Конечно, альтернативой является перемещение всей страницы по мере ее расширения ... но я бы хотел избежать этого, если смогу.

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

А вот jsfiddle, чтобы продемонстрировать, что я имею в виду. Нажмите значок гамбургера, и вы увидите, что я имею в виду.

https://jsfiddle.net/qbqthjwm/

источник

2016-06-03 user2501783

Удалить эти два свойства, и вы будете иметь заголовок с 100% ширины экрана и гамбургер на правой стороне, когда вы переключить его.

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

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

Updated JSFiddle.

источник

2016-06-03 10:01:15

@ user2501783 Добро пожаловать :) –

Nav drawer, искажающий строку заголовка

ответ

Смежные вопросы