Rotating an element with JQuery

Rotating an element with JQuery - javascript

I'm creating a basic layout to test my knowledges. I have been creating a menu and I decided to customize it. I want to rotate of 90 degrees the icon made up of 3 vertical lines every time users click on it ( This icon is visible only when the page is despayed on smartphones- #media(max-size: 968px). This icon show the menu when it's clicked. I read how to do it by googling too, but I haven't found an answer yet. Do I have to use css or animate? can I reach to the target with rotate method ? Can you show me the correct way? I don't understand how to use them to rotate the icon.
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
});//end of $buttonNav
});//end of the start
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>

This can be accomplished through CSS3's transform.
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
$('.header__icon-bar').toggleClass('rotate90')
});//end of $buttonNav
});//end of the start
.rotate90 {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>

CSS Transform could do what you need. Make a class for each 'state' of the transformation. Change the classes per state change. If there are two states there will be a normal state and a rotated state. When user clicks the 3 lines the class is changed from normal state to rotated state. You will need an onclick event to check whether the img you clicked has either the normal class or the rotated class.
if($('this').attr('class')=='normal'){
///switch to rotated class
}
Do counter else if statement for if the image is already rotated.
if($('this').attr('class')=='rotatedl'){
///switch to normal class
}
ps the classes will be calling the transform keyframe you create! Need to create the keyframe transform animation before you can call the class that uses it.
https://www.w3schools.com/cssref/css3_pr_transform.asp

$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
if( $('.header__nav').hasClass('is-open')){
$('.header__icon-bar').css('transform','rotate(90deg)')
}else{
$('.header__icon-bar').css('transform','rotate(0deg)')
}
});//end of $buttonNav
});//end of the start

you can add animation to make it smooth:
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
See full demo
$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
if($('.header__icon-bar').hasClass('rotate-right')){
$('.header__icon-bar').removeClass('rotate-right');
$('.header__icon-bar').toggleClass('rotate-left');
}else{
$('.header__icon-bar').removeClass('rotate-left');
$('.header__icon-bar').toggleClass('rotate-right');
}
});//end of $buttonNav
});//end of the start
/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}
body{ background: #eee; }
/*----------
HEADER
-----------*/
.header__nav{ display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }
/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}
#media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}
.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}
/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}
}
*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes rotate-right {
from {
opacity: 0;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
opacity: 1;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.rotate-right {
-webkit-animation-name: rotate-right;
animation-name: rotate-right;
}
#-webkit-keyframes rotate-left {
from {
opacity: 0;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
opacity: 1;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate-left {
from {
opacity: 0;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
opacity: 1;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.rotate-left {
-webkit-animation-name: rotate-left;
animation-name: rotate-left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
<div class="header__background">
<a class="header__icon-bar animated" href="">
<span></span>
<span></span>
<span></span>
</a>
</div>
<ul class="header__nav">
<li class="header__nav__item"> Home </li>
<li class="header__nav__item"> Contact </li>
<li class="header__nav__item"> Apply </li>
<li class="header__nav__item"> About </li>
</ul>
</header>

Related

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

Below is the code I've got set up for my responsive menu. On the hamburger menu, I have some Javascript set so that the menu will close after clicking on one of the links inside of it.
Javascript:
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
What I'd like to do is also have the hamburger menu close when navigating between pages using the forward or backward arrow on a web browser. I've played around with a few bits of Javascript but haven't been able to achieve the result I'm looking for. If anyone knows how I could close the hamburger menu when navigating between pages I'd appreciate you sharing your knowledge with me. Thank you.
Menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

How Can I Close My Hamburger Menu After Clicking On A Link?

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}

how do I stop invisible elements from being triggered when "overlay" div is not active

When I'm using flexbox to align the items inside the overlay div, everything is working fine how it's supposed to except the anchor tags that are being triggered without even having to open the menu and the tags are invisible but clickable just beside the menu, how do I fix it without having to change the style of the menu or overlay? Any help is appreciated. Cheers!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:block;
}
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
transition: opacity 1.5s ease-in-out;
}
.no-scroll{
overflow: hidden;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 35px;
color: white;
}
.contents a:hover {
transform: scale(1.2);
transition: opacity 5s ease-in-out;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
Log in
Sign up
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Look into using pointer-events to stop mouse events
https://jsfiddle.net/vghszb1n/
.contents a {
cursor: default;
pointer-events: none;
text-decoration: none;
font-family: Circular Std Book;
font-size: 35px;
color: white;
}
.open .contents a {
cursor: pointer !important;
pointer-events: all !important;
}

Drop down menu is not positioning correcting and on hover text moves

I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Develop Reference

JavaScript is the programming language of the Web.

Rotating an element with JQuery - javascript

Related

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

How Can I Close My Hamburger Menu After Clicking On A Link?

how do I stop invisible elements from being triggered when "overlay" div is not active

Drop down menu is not positioning correcting and on hover text moves

Categories

Resources