Develop Reference

How to close the responsive navigation bar automatically after clicking on a link in the menu (using JavaScript)?

Below is the HTML, CSS and JavaScript codes that I have used to create the navigation bar of my website;
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0"
}
function hideMenu(){
navLinks.style.right = "-700px"
}
header{
background-color: black;
background-position: center;
background-size: cover;
height: 12vh;
width: 100%;
z-index: 1;
position: fixed;
}
.logo img{
float: left;
width: 70px;
margin-top: 10px;
}
.main-nav{
float: right;
margin-top: 30px;
list-style: none;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
padding: 5px 10px;
font-size: 15px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
}
.main-nav li.active a{
border: 2px solid #a40000;
background-color: black;
}
.main-nav li a:hover{
border: 2px solid #a40000;
background-color: black;
}
<header>
<div class="logo">
<img src="logokm.png" alt="logokm">
<ul class="main-nav" id="navLinks">
<img class="hm" src="close1.png" alt="c" onclick="hideMenu()">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SKILLS</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>CONTACT ME</li>
</ul>
<img class="hm1" src="open1.png" alt="o" onclick="showMenu()">
</div>
</header>

jquery toggleclass issues not collapsing [duplicate]

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");
});
});

Dropdown menu for webpage

I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.
Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
see the ul is out side the Items li, put it inside and it will work like this.
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
You were putting a ul inside a ul directly.

The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>

slideToggle() not working withe <ul>

I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.

You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;

CSS Jquery vertical navigation menu with horizontal submenus

I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks

try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}

this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.