Implementing the height and width properties in the default state of the element is crucial rather than applying them only after checking the menu. The default values for height and width are both set as auto, and transitioning from or to auto directly is not supported, resulting in an abrupt hiding instead of a smooth transition.
Even when utilizing transform: translateX(-100%) to initially conceal the menu, setting default height and width will not affect the layout due to how CSS rules cascade. Below is a demo showcasing the compiled CSS code.
&__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
.c-hamburger--icon:checked ~ &{
background: #000;
transform: translateX(0);
opacity: .7;
}
}
Another important consideration is that the position property should be defined within the default state itself, as it cannot be transitioned over time. This helps maintain consistency in the positioning of elements throughout interaction states.
@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
* {
padding: 0;
margin: 0;
font-size: medium;
font-family: 'Titillium Web', sans-serif;
}
.l-app__menu {
position: fixed;
top: 0;
height: 100vh;
width: 270px;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .l-app__menu {
transform: translateX(0);
background: #000;
opacity: .7;
}
.l-app__left {
float: left;
position: fixed;
background: #185a9d;
width: 50%;
height: 100%;
overflow: hidden;
}
@media (max-width: 1200px) {
.l-app__left {
position: static;
width: 100%;
height: 100vh;
background: #fff;
}
}
.l-app__right {
float: right;
background: #fff;
width: 50%;
height: 100vh;
}
@media (max-width: 1200px) {
.l-app__right {
position: static;
width: 100%;
background: #bfbfbf;
}
}
.l-app__right--inner {
padding: 50px;
}
.l-app__hamburger {
position: fixed;
z-index: 1;
}
.c-bike__image {
background: url(http://bikeshopgirl.com/wp-content/uploads/2011/10/15038.jpg) no-repeat;
background-size: contain;
min-height: 100%;
opacity: .9;
top: 0;
position: relative;
}
@media (max-width: 1200px) {
.c-bike__image {
position: static;
width: auto;
opacity: 1;
}
}
.c-bike__header {
font-size: 150%;
padding: 15px;
}
@media (max-width: 1200px) {
.c-bike__header {
padding: 0;
}
}
.c-bike__article {
letter-spacing: .3px;
padding: 10px;
}
.c-bike__article.c-bike__header {
font-size: 120%;
padding: 0;
}
.c-hamburger {
background: transparent;
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background .3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger--icon {
display: none;
}
.c-hamburger--icon ~ .c-hamburger--htx {
transition: transform 1s;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx {
transform: translate(250px, 0) rotate(90deg);
transition: 1s ease-in-out;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span {
background: none;
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::before {
top: 0;
transform: rotate(45deg);
}
.c-hamburger--icon:checked ~ .c-hamburger--htx .c-hamburger__span::after {
bottom: 0;
transform: rotate(-45deg);
}
.c-hamburger--htx__span {
transition: transform .5s;
}
.c-hamburger--htx__span::before {
transition-property: top, transform;
}
.c-hamburger--htx__span:after {
transition-property: bottom, transform;
}
.c-hamburger__span {
display: block;
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: #930202;
border-radius: 5px;
}
.c-hamburger__span::before,
.c-hamburger__span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 8px;
background: #930202;
border-radius: 5px;
content: "";
}
.c-hamburger__span::before {
top: -20px;
}
.c-hamburger__span::after {
bottom: -20px;
}
<div class="l-app">
<div class="l-app__hamburger">
<input id="c-hamburger--icon" type="checkbox" name="c-hamburger" class="c-hamburger--icon" />
<label for="c-hamburger--icon" class="c-hamburger c-hamburger--htx">
<span class="c-hamburger__span"></span>
</label>
<nav class="l-app__menu"></nav>
</div>
<div class="l-app__left">
<div class="l-app__left--inner c-bike__image"></div>
</div>
<div class="l-app__right">
<div class="l-app__right--inner">
<section class="c-bike">
<header>
<h3 class="c-bike__header">Bike name</h3>
</header>
<article class="c-bike__article">
<header>
<h4 class="c-bike__article c-bike__header">Secion name</h4>
</header>
<p class="c-bike__article c-bike__paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis diam egestas, dictum augue ut, dignissim lorem. Integer eros felis, sodales at viverra et, ultricies malesuada lacus. Nullam ex orci, vulputate vitae porta eu, gravida vel arcu. Curabitur
mattis quis dolor sit amet dapibus. Etiam mattis diam id rhoncus tempor. Phasellus tristique auctor luctus. Nulla ullamcorper tempus porttitor. Sed et tincidunt sem. Morbi dictum ut orci sit amet pretium. Integer feugiat enim vitae neque commodo,
ac malesuada lacus scelerisque. Donec quis odio in ipsum facilisis auctor. Vestibulum turpis turpis, blandit sit amet tempus sed, facilisis nec tellus. Morbi elementum vulputate sem a rhoncus. Vivamus bibendum congue velit, ac hendrerit est
suscipit ac. Nunc a molestie libero.
</p>
</article>
</section>
</div>
</div>
</div>