Make menu hamburger close when click on link and outside

Make menu hamburger close when click on link and outside - javascript

I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.

You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.

Related

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu 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;
}
#togglmenu 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;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu 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: #ededed;
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;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

How to move an element on the opposite side? html,css,js

I have the following code:
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("margin-left", "0px");
$("#plus").css("margin-left", "-425px");
});
$("#close").click(function() {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
margin-left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
margin-left: -425px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
left: 4px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
margin-left: -425px;
}
#plus {
margin-left: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
How would I move the to the opposite side of the page? Instead of it appearing at the far left of the page, how would I make it appear at the far right? I have tried changing the margin-left in the js but I am not quite getting it right, as it does not output the expected output. Any suggestions?

When using fixed positioning of elements, I advise you to use the right / left rule for offset.
In jquery I changed all margin-left to right. I did the same in css. It was with those rules that dealt with displacement. Also, to rotate the triangle, I adopted rule border-right: 55px solid #1c8dc4 for #plus::after.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("right", "0px");
$("#plus").css("right", "-425px");
});
$("#close").click(function() {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
right: -425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
right: 0px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
right: 2px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-right: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
right: -425px;
}
#plus {
right: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>

Is there a way when I click on hamburger, of ul to go horizontally and move the logo from center to far left?

Can I click on the hamburger menu and open it horizontally and verticaly at the same time..? You can see on the images what I exactly want basically I want an animation when I click on the hamburger so the logo moves to the far left and it all needs to be in the same speed. And social media needs to go verticaly.
Before clicking..
After clicking..
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
.logo-header {
width:50px;
position:absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label><a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span> </a>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
Thank you in advance

You can do it like this:
input[type=checkbox]:checked~.sidebarIconToggle~ a > .logo-header {
left: 0%;
transition: all 0.3s;
}
Also added transition: all 0.3s; to the class .logo-header
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
demo
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
left: 0%;
transition: all 0.3s;
}
.topMenu{
list-style:none;
float:right;
color:#fff;
margin-right: -270px;
}
.topMenu li{
display:inline;
}
input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
margin-right: 70px;
transition: all 0.3s;
}
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span>
</a>
<ul class="topMenu">
<li>about us</li>
<li>contact</li>
<li>support</li>
</ul>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>

How to close the dropdown if the user clicks outside of it?

I am making user dropdown when we click on the picture we get a dropdown or a card. I want to close it when user click outside of dropdown. The code of closing will be in JavaScript. Please solve this problem.
I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>
<style>
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
</style>
</head>
<body>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.menubtn').on('click', function() {
$('.navmenu').toggleClass('opened');
});
</script>
</body>
</html>
Please help me in solving this code. Thank You

Bind click on document and remove opened class on click of document.
Use e.stopPropagation() so that event does not propagate on document which event is invoked on click of the .menubtn
$('.menubtn').on('click', function(e) {
e.stopPropagation();
$('.navmenu').toggleClass('opened');
});
$(document).on('click', function() {
$('.navmenu').removeClass('opened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>

Radio buttons validation while clicking on "continue" button Javascript

I have create a template containing 4 radio buttons and 1 "continue" button with effects as shown below
I am trying to add a javascript code while clicking on "continue" :
if any radio button is selected it will pop up an alert that you need to select one buton
if radio 1 is selected, it will open the page choice1.php, if radio 2 is selected then it will open the page choice2.php and so on...
I was following some tutorials and test it on basic examples, it works for me but usually I see
<form onsubmit="return validateSubmit();" action="#">
and
<input type="submit" value="Submit">
When i change my button to submit type i lose the effect i added with css.
Here is my code snippet
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br/>
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>
can anyone help me please how to keep the same design of "continue" button and add to it the javascript part.
Thank you very much.

If you just want to switch to a different page instead of submitting a form you can simply perform a check for the value of the radio button and then redirect to the specific page directly like this:
When you uncomment the window.location.href line you would be redirected to the file that you see in the console output.
$(function(){
$('.bttn').on('click', function(){
if($('input[name="selector"]').groupVal() === undefined){
alert('Please select an option!');
} else {
console.log('choice' + $('input[name="selector"]').groupVal() + '.php');
//window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php';
}
});
});
jQuery.fn.extend({
groupVal: function() {
return $(this).filter(':checked').val();
}
});
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br>
<ul>
<li>
<input type="radio" id="f-option" value="1" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" value="2" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" value="3" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" value="4" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Make menu hamburger close when click on link and outside - javascript

Related

How can i close this navbar when user clicks a link on mobile view?

How to move an element on the opposite side? html,css,js

Is there a way when I click on hamburger, of ul to go horizontally and move the logo from center to far left?

How to close the dropdown if the user clicks outside of it?

Radio buttons validation while clicking on "continue" button Javascript

Categories

Resources