css closing sidebar when clicking in the main window - html

Hello there I searched for other people who has the same problem as me but I couldn't implement their problem to mine so I want to close the sidebar when clicking outside the sidebar.
html {
background-color: #161618;
overflow: hidden;
}
#menuToggle
{
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a
{
text-decoration: none;
color: #7e7e7e;
font-family: 'Microsoft Yahei';
transition: color 0.3s ease;
}
#menuToggle a:hover
{
color: white;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: 2px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #FCFCFC;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: fixed;
width: fit-content;
background-color: #141414;
margin: -100px 0 0 -50px;
padding: 50px;
box-shadow: 0 -2px 15px rgb(5, 5, 5);
height: 1400px;
padding-top: 125px;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}
.github:hover {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(308deg) brightness(101%) contrast(101%);
}
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
<li><svg class="github" style="position:absolute;fill: #7e7e7e;width:35px;height:35px;margin-top: 275%;margin-left: 25%;padding:0%;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></li>
</ul>
</div>
</nav>
as I should I have tried to solve the problem on my own and I did stuff with js with body onclick= ... but I am not that familiar with js and I don't know if it would work


Your toggle menu works by checking/unchecking a checkbox. This can only be done by clicking on the input element (incl. all child elements) itself or by clicking on the linked label.
None of that applies if you clicking outside that specific element. As such you require a script to listen for click events outside of that element. here you find a reference to this code
Last but not least to finish the code from the reference you can use:
document.querySelector("#menuToggle input").checked = false; to uncheck the checkbox in question to close it.
var ignoreElement = document.querySelector("#menuToggle");
document.addEventListener('click', function(event) {
var clickElement = ignoreElement.contains(event.target);
if (!clickElement) {
document.querySelector("#menuToggle input").checked = false;
}
});
html {
background-color: #161618;
overflow: hidden;
}
#menuToggle {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #7e7e7e;
font-family: 'Microsoft Yahei';
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: white;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: 2px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #FCFCFC;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: fixed;
width: fit-content;
background-color: #141414;
margin: -100px 0 0 -50px;
padding: 50px;
box-shadow: 0 -2px 15px rgb(5, 5, 5);
height: 1400px;
padding-top: 125px;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
.github:hover {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(308deg) brightness(101%) contrast(101%);
}
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="loading.html">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="index.html">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li><svg class="github" style="position:absolute;fill: #7e7e7e;width:35px;height:35px;margin-top: 275%;margin-left: 25%;padding:0%;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></li>
</a>
</ul>
</div>
</nav>

Related

Burger menu not going to correct position

I have made a burger menu for my site but the dropdown menu/ element does not go inside the menu icon. It moves the wrong way. It goes from left to right but I need it to go from right to left. I can't figure out how to make the menu move the other way. I have tried to tweak some of the tags but either it's not worked or it's broken.
nav {
position: absolute;
top: -2%;
left: 93%;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ffffff;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Rules</li>
<li>Support us</li>
</ul>
</div>
</nav>
any help is greatly appreciated, thank you

The page shows hidden items off the screen in mobile mode

I trying to resolve it, but i dont know that problems is with menu, or icon of chat(using tawk.to)
The page is also online on www.niebieskiczat.pl
I never had this problem, but i think i change something and now i got this like that, or maybe tawk.to change somethink? The hamburger menu should appear on the regular website and on the mobile. Now on PC working god, but on mobile i got problem like on picture. Here is code for CSS navbar
.menuToggle {
display: block;
position: absolute;
top: 40px;
right: 120px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
.menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
.menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
.menu {
position: absolute;
width: 300px;
margin: -80px 0 0 0;
padding: 50px;
padding-top: 105px;
right: -150px;
background: lightblue;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.menu li {
padding: 10px 0;
font-size: 1.2em;
}
.menuToggle input:checked ~ ul {
transform: none;
opacity: 1;
}
#media screen and (max-width: 768px) {
#menu {
transform: none;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
}
And HTML
<nav role='navigation'>
<div class="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul class="menu">
<a href="pages/about.html">
<li>O nas</li>
</a>
<a href="pages/howtotalk.html">
<li>Jak rozmawiać?</li>
</a>
<a href="pages/contacts.html">
<li>Przydatne kontakty</li>
</a>
</ul>
</div>
</nav>

Add this to your menu class.
It will solve your problem.
.menu {
position: fixed;
right: 0;
}

try
#media and screen and (max-width:766px){ .menu{ display:none; } }

Having trouble aligning and increasing the width of my toggle navbar

I created a toggle navbar, where a menu and animation appear whenever the button is clicked. However, I'm having trouble with a few parts.
My content isn't aligning on the right side of the page, mainly the button itself.
I'm struggling to get the background of my menu (the lavender) to fill the full width and height of the page when it appears.
I've tried several methods, including 'float: right', 'width: 100vw', 'height: 100vh', andm more, but no luck.
Below is my code, as well as a link to essentially the look I'm trying to achieve. Any help would be greatly appreciated. Thanks!
Example: http://madetogether.com.au/case-study/sprout/
<!-- HTML -->
<!-- Navigation Bar -->
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>
<a href="#page1" class="nav-link">
Services
</a>
</li>
<li class="nav-item">
<a href="#page3" class="nav-link">
About
</a>
</li>
<li class="nav-item">
<a href="#page4" class="nav-link">
Contact
</a>
</li>
</ul>
/* CSS */
/* Navigation Bar */
#menuToggle {
display: block;
position: relative;
top: 1em;
left: 1em;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
/* top: -7px;
left: -5px; */
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
a {
text-decoration: none;
color: black;
transition: color 0.3s ease;
}
a:hover {
color: red;
}
#menuToggle {
display: block;
position: relative;
top: 1em;
left: 1em;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 100%;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: lavender;
opacity: .85;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: .5em 0;
font-size: 1.5em;
text-align: right;
}
#menuToggle input:checked ~ ul {
transform: none;
}

Wrap the menu icon span with outer div and add float right to it and for checkbox use right 0
Following is the updated code
UPDATE
I tried my level best to get the 100% height background using CSS, but failed. So I have tricked it with JavaScript.
function toggleHeight(){
var navElement = document.getElementsByTagName("nav")[0];
navElement.classList.toggle("fullHeight");
var menuElement = document.getElementById("menu");
menuElement.classList.toggle("fullHeight");
var menuToggleElement = document.getElementById("menuToggle");
menuToggleElement.classList.toggle("fullHeight");
}
#menuToggle {
display: block;
position: relative;
top: 1em;
left: 1em;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
/* top: -7px;
left: -5px; */
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
a {
text-decoration: none;
color: black;
transition: color 0.3s ease;
}
a:hover {
color: red;
}
#menuToggle {
display: block;
position: relative;
top: 1em;
left: 1em;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
right: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 100%;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: lavender;
opacity: .85;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: .5em 0;
font-size: 1.5em;
text-align: right;
}
#menuToggle input:checked ~ ul {
transform: none;
}
.menuIcon {
float: right;
}
html, body {
height: 100%;
margin: 0px;
}
.fullHeight {
height: 100% !important;
}
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" onclick="toggleHeight()"/>
<div class="menuIcon">
<span></span>
<span></span>
<span></span>
</div>
<ul id="menu">
<li>
<a href="#page1" class="nav-link">
Services
</a>
</li>
<li class="nav-item">
<a href="#page3" class="nav-link">
About
</a>
</li>
<li class="nav-item">
<a href="#page4" class="nav-link">
Contact
</a>
</li>
</ul>

Animation only happening on one checkbox despite different classes

I have found a checkbox which I really want to use but when I add more than 1 checkbox the animation only applies to the first one.
I have tried creating new class's like .cbx2 and .inp-cbx2 and applying the same style's but the animation still only applies to the first checkbox.
Could you please explain where I'm going wrong?
Thanks.
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx span:last-child {
padding-left: 8px;
}
.cbx:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx:checked + .cbx span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx2 {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx2 span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx2 span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx2 span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx2 span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx2 span:last-child {
padding-left: 8px;
}
.cbx2:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx2:checked + .cbx2 span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx2:checked + .cbx2 span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx2:checked + .cbx2 span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
<input class="inp-cbx" id="cbx" type="checkbox" style="display: none;"/>
<label class="cbx" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>DIRECT</span></label>
<input class="inp-cbx2" id="cbx2" type="checkbox" style="display: none;"/>
<label class="cbx2" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10" class="c">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>MUTI ROUTE</span></label>

The whole reason classes exist in CSS is to make your styles reusable across multiple elements. There is no need to duplicate your CSS.
The reason the second check box doesn't work when using the same classes as the first is because you haven't updated the second labels for property. This property tells the browser the id of the form element that should be effected when the label is clicked.
In your case, the second label should look like this:
<label class="cbx" for="cbx2"><span>
/* #### CHECKBOX STYLES AND ANIMATION #### */
.cbx {
margin: auto;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.cbx span {
display: inline-block;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
position: relative;
width: 50px;
height: 50px;
border-radius: 0px;
transform: scale(1);
vertical-align: middle;
border: 1px solid #9098A9;
transition: all 0.2s ease;
}
.cbx span:first-child svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
content: "";
width: 100%;
height: 100%;
background: #2bbfcb;
display: block;
transform: scale(0);
opacity: 1;
border-radius: 0%;
}
.cbx span:last-child {
padding-left: 8px;
}
.cbx:hover span:first-child {
border-color: #2bbfcb;
}
.inp-cbx:checked+.cbx span:first-child {
background: #2bbfcb;
border-color: #2bbfcb;
animation: wave 0.4s ease;
}
.inp-cbx:checked+.cbx span:first-child svg {
stroke-dashoffset: 0;
}
.inp-cbx:checked+.cbx span:first-child:before {
transform: scale(3.5);
opacity: 0;
transition: all 0.6s ease;
}
#keyframes wave {
50% {
transform: scale(0.9);
}
}
<input class="inp-cbx" id="cbx" type="checkbox" style="display: none;" />
<label class="cbx" for="cbx"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>DIRECT</span></label>
<input class="inp-cbx" id="cbx2" type="checkbox" style="display: none;" />
<label class="cbx" for="cbx2"><span>
<svg width="40px" height="40px" viewbox="0 0 12 10" class="c">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span><span>MUTI ROUTE</span></label>

CSS fold out menu not closing after clicking

I have created a simple fold out menu. When I click on menu icon, the menu opens.
Now when I click on any option, it should get closed which is not happening. Below is my code in Codepen.
I would prefer to solve this using CSS only. I do not wish to use JS.
body {
margin: 0;
padding: 0;
/* make it look decent enough */
background: #232323;
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
a:hover {
color: tomato;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="https://erikterwan.com/" target="_blank">
<li>Show me more</li>
</a>
</ul>
</div>
</nav>

You can increase the size of the hidden <input type="checkbox"/> to make it cover all menu elements.
Though this ruins the hover-effect.
Otherwise you must use javascript.
body {
margin: 0;
padding: 0;
/* make it look decent enough */
background: #232323;
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
a:hover {
color: tomato;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
#menuToggle input:checked {
width: 300px;
height: 290px;
}
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="https://erikterwan.com/" target="_blank">
<li>Show me more</li>
</a>
</ul>
</div>
</nav>
UPDATE:
Using javascript makes it quite easy to achieve it by unchecking the checkbox on every <li> click
var $input = document.querySelector('input[type="checkbox"]');
var $$menuLinks = document.querySelectorAll('#menu li');
$$menuLinks.forEach(link => {
link.addEventListener('click', function() {
$input.checked = false;
});
});
body {
margin: 0;
padding: 0;
/* make it look decent enough */
background: #232323;
color: #cdcdcd;
font-family: "Avenir Next", "Avenir", sans-serif;
}
a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
a:hover {
color: tomato;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="https://erikterwan.com/" target="_blank">
<li>Show me more</li>
</a>
</ul>
</div>
</nav>