jquery toggleclass issues not collapsing [duplicate]

jquery toggleclass issues not collapsing [duplicate] - javascript

This question already has an answer here:
toggleClass not working in ajax
(1 answer)
Closed 3 years ago.
I'm having a problem with my jquery, I'm looking to collapse my sidebar on click on the hamburger, but toggleclass seeems to be not working.
Ive seen tutorials where toggleclass works just fine, is this a new issue?
Any help would be appreciated, thanks
* {
margin: 0;
list-style: none;
padding: 0;
text-decoration: none;
box-sizing: border-box;
font-family: default;
}
body {
background: white;
}
.wrapper {
margin: 10px;
}
.wrapper .top_navbar {
width: calc(100% - 20px);
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger {
width: 70px;
height: 100%;
background: green;
padding: 15px 17px;
border-top-left-radius: 20px;
cursor: pointer;
}
.wrapper .top_navbar .hamburger div {
width: 35px;
height: 4px;
background: black;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu {
width: calc(100% - 70px);
height: 100%;
background: red;
border-top-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo {
color: black;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul {
display: flex;
}
.wrapper .top_navbar .top_menu ul li a {
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
padding-top: 7px;
line-height: 35px;
border: 1px solid yellow;
text-align: center;
border-radius: 50%;
color: grey;
}
.wrapper .top_navbar .top_menu ul li a:hover {
background-color: blue;
color: white;
}
.wrapper .sidebar {
position: fixed;
top: 70px;
left: 10px;
background: green;
width: 200px;
height: calc(100% - 80px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
}
.wrapper .sidebar ul li a {
display: block;
padding: 20px;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: white;
}
.wrapper .sidebar ul li a span.icon {
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title {
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active {
background: purple;
color: green;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before {
display: block;
}
.wrapper .main_container {
width: calc(100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item {
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
border: 0;
box-shadow: 0px 0px 5px 0px;
}
.wrapper.collapse .sidebar {
width: 70px;
}
.wrapper.collapse .sidebar ul li a {
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon {
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title {
display: none;
}
.wrapper.collapse .main-container {
width: calc(100% - 70px);
margin-left: 70px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kit.fontawesome.com/5534ba8f0f.js"></script>
<script>
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass(".collapse");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="top_navbar">
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<div class="top_menu">
<div class="logo">Personal Dashboard</div>
<ul>
<li><i class="fas fa-search"></i></li>
<li><i class="fas fa-bell"></i></li>
<li><i class="fas fa-user"></i></li>
</ul>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">a</span>
</a></li>
<li><a href="#" class="active">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">b</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">c</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">d</span>
</a></li>
<li><a href="#">
<span class="icon">
<i class="fab fa-accessible-icon" aria-hidden="true"></i>
</span>
<span class="title">e</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskgjsg jskljgnrilgnslinglmsir.jmeljfkjskjfksjekfjskejksjfkesjfksefjskjfjeskfksjfkesjrjskejrkjesjktrskrjskejrrkjskrjekjrskjrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
<div class="item">
jgjgjjskg jsgjskljgnrilgn slinglm sir.jmeljfkjsk jfksjekfjsk ejksjfkesjfksefjs kjfjeskfksjfkesjrjskejrkje sjktrskrjske jrrkjskrjekjrsk jrekj
</div>
</div>
</div>
</body>
</html>

You do not need to define .collapse as a class because toggleClass expects a class.
Try
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});

Related

Can't open modal window

Hello I have a project for my studies which is to display data on a dashboard that will be more or less modifiable by the user according to his needs.
I'm trying to open a modal window but it doesn't work and i can't figure out where my mistake came from.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelector(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>

Adding to the earlier answer, the modal window doesn't close on clicking the close button. It only closes by clicking outside of it. This should solve it all: remove the modal-trigger class in the overlay class. It should be <div class="overlay"> not <div class="overlay modal-trigger"> and for demonstration, I changed the background colour
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: purple;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#" class="modal-trigger">
<i class='bx bx-customize'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
</body>
</html>

It should be working now, remember that querySelector() only grab the first match, you should use querySelectorAll() method instead, that is iterable and grabs all elements that match.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>

How position a text inside div inside image?

I would like to know where I made a mistake or where should I add something?
How to replace hours on third blue div on bottom to the right site? I was trying and shearching, but I can't see solution. Please let me know what to change and maybe also can You recomend me tutorial or articles with that case.
When I hover over a menu button, I'd like the text to turn white, but when i change it like color: #fff i doesn't work.
Sc1
Sc2
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a{
text-decoration: none;
color: black;
}
.active, .menubar ul li:hover{
background-color: #2E8BC0;
border-radius: 2px;
color: white;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2>6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>

Add justify-content: space-between (documentation) :
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display: flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
As recommened by #Chris G, use a more specific selector :
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
background-image:url(Images/bg.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
width: 100%;
min-height: 100vh;
position: relative;
}
.menubar{
background: #fff;
text-align: center;
position: static;
}
.menubar ul{
display: inline-flex;
list-style: none;
color: black;
}
.menubar ul li{
width: auto;
margin: 10px;
padding: 15px;
}
.menubar ul li a {
text-decoration: none;
color: black;
}
.menubar ul li:hover a {
color: white;
}
.active, .menubar ul li:hover {
background-color: #2E8BC0;
border-radius: 2px;
}
.menubar .fas, .menubar .far{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menubar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: #040c7a;
margin-top: 15px;
margin-left: -15px;
}
.menubar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menubar ul li:hover .sub-menu-1 ul li{
width: 100px;
padding: 10px;
border-bottom: 1px solid #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menubar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menubar ul li:hover .sub-menu-1 ul li a:hover{
color: #278eff;
}
.fa-angle-right{
float: right;
margin-left: 8px;
}
.class-menu-2{
display: none;
}
.hover-me:hover .class-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 110px;
background: #040c7a;
}
.row1{
color: white;
display:flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: transparent;
position: absolute;
bottom: 10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.text-box1{
background-color: #2E8BC0;
height: 150px;
width: 300px;
display: block;
}
.text-box1 h3{
padding: 10px;
font-size:15px;
text-align: left;
margin-left: 20px;
}
.text-box1 p{
font-size: 25px;
padding: 10px;
text-align: left;
margin-left: 20px;
display: flex;
}
.text-box1 p2{
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
cursor: pointer;
margin-left: -40px;
margin-top: 10px;
}
.hero-btn:hover{
border: 1px solid white;
background: white;
transition: 1s;
color: black;
}
.text-box1 p a{
color: white;
}
.text-box1 ul li{
font-size: 17px;
margin-left: 20px;
margin-right: 20px;
display:flex;
border-bottom: 1px dotted white;
justify-content: space-between;
}
.text-box1 ul li:last-child{
border-bottom: none;
}
.text-box1#first{
background-color: #0C2D48;
}
.text-box1#second{
background-color: #145DA0;
}
.text-box1#third{
background-color: #2E8BC0;
}
<!DOCTYPE html>
<html>
<head>
<title>Przychodnia</title>
<link rel="stylesheet" href="PrzychodniaStyle.css">
</head>
<body>
<section class="header">
<div class="menubar">
<ul>
<li class="active"><i class="fas fa-home"></i>Strona głowna</li>
<li><i class="far fa-address-card"></i>Specjalistyka
<div class="sub-menu-1">
<ul>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li class="hover-me"> Menu<i class="fas fa-angle-right"></i>
<div class="class-menu-2">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div>
</li>
<li> Menu</li>
</ul>
</div>
</li>
<li><i class="fas fa-motorcycle"></i>Stomatologia
<div class="sub-menu-1">
<ul>
<li> Menu</li>
<li> Menu</li>
<li> Menu</li>
</ul>
</div></li>
<li><i class="fas fa-toolbox"></i>Poradnie POZ</li>
<li><i class="fas fa-graduation-cap"></i>Medycyna Pracy</li>
<li><i class="fas fa-flag-checkered"></i>Diagnostyki</li>
<li><i class="fas fa-user-plus"></i>Laboratorium</li>
<li><i class="fas fa-user-plus"></i>O nas</li>
<li><i class="fas fa-mobile-alt"></i>Kontakt</li>
</ul>
</div>
<div class="row1">
<div class="text-box1" id="first">
<h3>Rejstracja telefoniczna</h3>
<p>+1234567890</p>
</div>
<div class="text-box1" id="second">
<h3>Rejstracja elektroniczna</h3>
<p class="e">przychodnia#eu.pl</p>
Formularz kontaktowy
</div>
<div class="text-box1" id="third">
<h3>Godziny otwarcia</h3>
<ul>
<li><p1>Poniedziałek</p1><p2 class="hour">6:00-18:00</p2></li>
<li>Wtorek</li>
<li>Środa</li>
<li>Czwartek</li>
<li>Piątek</li>
</ul>
</div>
</div>
</section>
<section>
<div class="text-box1">
Lolz
</div>
Formularz kontaktowy
</section>
</body>
</html>

How to switch between menus via jQuery?

I'm trying to switch between menus when clicking on the admin or user menu link. How do I make this an animation to make it slideOutLeft for the current menu and then slideInLeft for the next menu? Is there any possible way by using it and not using add class display none or block?
Here's my code:
A little bit messy for the jQuery functions also is there any chance to improve and make it more robust for each functions?
$(document).ready(function () {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function (e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function (e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
.show-nav {display:block !important;}
.hide-nav {display:none !important;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>

I hope this is what you're looking for. I've added comments to the CSS where all the animation is defined.
$(document).ready(function() {
// load the functions
switchAdminMenu();
switchUserMenu();
});
function switchAdminMenu() {
$("body").on("click", "#to_admin_menu", function(e) {
$('.user-sidebar').addClass('hide-nav');
$('.admin-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
function switchUserMenu() {
$("body").on("click", "#to_user_menu", function(e) {
$('.admin-sidebar').addClass('hide-nav');
$('.user-sidebar').removeClass('hide-nav').addClass('show-nav');
});
}
/*preset*/
/*changing the margin-left*/
.show-nav {margin-left: 0;}
.hide-nav {margin-left: -220px;}
/*user*/
.user-sidebar {
background: red;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.user-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.user-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.user-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.user-sidebar ul li a:hover {
color: yellow;
}
.switch-btn {
border: 1px solid blue;
padding: 10px;
display:block;
width:100%;
text-align: center;
text-decoration: none;
background: yellow;
color: blue;
box-sizing:border-box;
}
.switch-btn:hover {
background: #fff;
}
.user-sidebar .sidebar-footer {
margin-top: 20vh;
}
/*admin*/
.admin-sidebar {
background: green;
padding: 20px;
position: fixed;
left: 0;
width: 180px;
height: 100vh;
transition: all 700ms; /* Added for animation */
}
.admin-sidebar ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.admin-sidebar ul li {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: left;
margin-bottom: 20px;
}
.admin-sidebar ul li a {
color: #fff;
text-decoration: none;
}
.admin-sidebar ul li a:hover {
color: yellow;
}
.admin-sidebar .sidebar-footer {
margin-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--User Sidebar-->
<nav class="user-sidebar show-nav">
<ul>
<li class="active">
<span>User Test 1</span>
</li>
<li>
</i><span>User Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>User Menu</span>
</div>
</nav>
<!--Admin Sidebar-->
<nav class="admin-sidebar hide-nav">
<ul>
<li class="active">
<span>Admin Test 1</span>
</li>
<li>
</i><span>Admin Test 2</span>
</li>
</ul>
<div class="sidebar-footer">
<span>Admin Menu</span>
</div>
</nav>

remove mobile menu when list item is clicked

This is my first question so apologies if not following standard practice.
I need help with this mobile nav menu. I got the code of the below youtube video. The issue is, while it is a good attempt at a pure CSS mobile nav, the menu does not auto remove when a list item is clicked.
.nav {
opacity: 1;
position: fixed;
z-index: 999;
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
width: 100%;
background: rgb(66,65,65);
background: grey;
transition: all 1s ease;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: #fff;
margin: 0 10px;
line-height: 70px;
font-size: 2em;
transition: all 0.5s ease;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media (max-width: 850px) {
.ml14 {
font-size: 5em;
}
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: rgb(66,65,65);
background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
}
#toggle:checked ~ .menu {
display: block;
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
<a class="section1" href="#">About</a>
<a class="contact-sec" href="#">Contact</a>
<a class="section3" href="#">Gallery</a>
<i class="fab fa-facebook"></i>
<i class="fa fa-instagram fa-5x"></i>
</div>
</div>
Codepen with menu
Youtube video showing original source of menu

I simple add function when click on link input check will be false and menu close.
function CloseMenu(){
document.getElementById("toggle").checked = false;
}
.nav {
opacity: 1;
position: fixed;
z-index: 999;
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
width: 100%;
background: rgb(66,65,65);
background: grey;
transition: all 1s ease;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: #fff;
margin: 0 10px;
line-height: 70px;
font-size: 2em;
transition: all 0.5s ease;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media (max-width: 850px) {
.ml14 {
font-size: 5em;
}
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: rgb(66,65,65);
background: linear-gradient(90deg, rgb(180, 180, 180) 0%, rgba(231,221,221,1) 72%);
}
#toggle:checked ~ .menu {
display: block;
}
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu" id="menu">
<a class="section1" href="#" onclick="CloseMenu()">About</a>
<a class="contact-sec" href="#" onclick="CloseMenu()">Contact</a>
<a class="section3" href="#" onclick="CloseMenu()">Gallery</a>
<i class="fab fa-facebook" onclick="CloseMenu()"></i>
<i class="fa fa-instagram fa-5x" onclick="CloseMenu()"></i>
</div>
</div>

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Develop Reference

JavaScript is the programming language of the Web.

jquery toggleclass issues not collapsing [duplicate] - javascript

You do not need to define .collapse as a class because toggleClass expects a class. Try $(document).ready(function(){ $(".hamburger").click(function(){ $(".wrapper").toggleClass("collapse"); }); });

Related

Can't open modal window

How position a text inside div inside image?

How to switch between menus via jQuery?

remove mobile menu when list item is clicked

HTML/CSS Jquery hover not showing up

Categories

Resources