How to make hamburger close upon click of links - javascript

I know this has been asked before, but my setup seems different than the ones I've found so far.
My code is as follows (really bad at coding, by the way)
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family:Helvetica;
}
.topnav {
overflow: hidden;
background-color: white;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #add8e6;
color: black;
}
.topnav a.active {
background-color: white;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 1000px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
color: black
}
}
#media screen and (max-width: 1000px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<div class="topnav" id="myTopnav">
Toimiva vatsa
Palautteet
Lyhyt sisältö
Tarkka sisältö
Jäsenyys ilmaiseksi
UKK
Hinta
Oma<br>kokemukseni
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Not sure what to do to make the hamburger fold after clicking one of the anchor links.
Also, for some reason some iOS users state that the menu (when not in hamburger) is on the left, not centered.
Thank you!


You could add the same function to those navigation items.
let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
Or you could add it to all those together, since you are calling the same function.
let navLinks = document.querySelectorAll('.topnav a');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
and remove it from your html:
<a href="#close" class="icon">
<i class="fa fa-bars"></i>
</a>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
link.addEventListener('click', function(e) {
e.preventDefault();
myFunction();
})
});
body {
margin: 0;
font-family:Helvetica;
}
.topnav {
overflow: hidden;
background-color: white;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #add8e6;
color: black;
}
.topnav a.active {
background-color: white;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 1700px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
color: black
}
}
#media screen and (max-width: 1700px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Toimiva vatsa
Palautteet
Lyhyt sisältö
Tarkka sisältö
Jäsenyys ilmaiseksi
UKK
Hinta
Oma<br>kokemukseni
<a href="#close" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Related

Responsive mobile hamburger menu

I'm almost done my website except my dropdown menu won't work. I've tried googling and asking friends for suggestions and none helped. Below I've attached code where the dropdown is used or mentioned:
/*Responsive Navigation*/
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active')
$('nav ul').toggleClass('active-menu')
})
});
#media(max-width:900px) {
.toggle {
display: block;
}
.toggle:before {
content: '\f0c9';
font-family: fontAwesome;
line-height: 0px;
margin-left: -30px;
}
.toggle.active:before {
content: '\f00d' !important;
}
}
/*Navbar full Screen*/
.toggle {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="" class="dropdown">
<div class="toggle"></div>
</a>
<!--Menu items-->
<ul class="menu">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

You'll need some huge code for this. Check this out! Exactly what you need.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin-right: 2;
margin-left: 2;
}
.topnav {
overflow: hidden;
background-color: black;
padding-left: -2;
padding-right: -2;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #eee;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px)
{
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<p>Resize the browser window to see how it works. If your screen is more than 600px wide, the menu will be in one line. If not, it will be a hamburger menu.</p>
</body>
</html>

Problem related to parent and child element

I am a newbie in Javascript coding. I wanted to do a mobile menu where if I click outside of the menu - the menu will disappear. I have done it successfully.
Now the problem is when I am clicking on the hamburger icon, the menu is not expanding. But when I am clicking on its parent element, it's working fine.
What's wrong in my Javascript code?
My code below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>

The problem here is
if (event.target.parentNode !== disappear ){
disappear.className = "topnav";
}
when you are clicking on the icon( i tag) the parent node is the anchor tag. so its true. I have changed the code to below. And this should work for your example, also check the whole code snippet below
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>

Dropdown menu is not working as expected in mobile view

I'm trying to add a dropdown menu to the mobile version of my site, but it doesn't seem to be working (I'm very new to web design).
The dropdown menu is correctly shown by clicking on the correspondent icon; the problem is that it is also shown by clicking at any point of the topnav menu. I just want the dropdown menu to appear only by clicking on the dropdown menu icon. Moreover, I'd the dropdown menu to disappear by clicking at any point outside of it. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
Floor Plan
Address
Project Overview
Location Advantage
Download
Similar Projects
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
let topnav = document.querySelector("#myTopnav");
topnav.onclick = function() {
this.classList.toggle('responsive');
}
</script>
</body>
</html>
Here you can try my code.
Hope you guys will help me.

You can check this answer. I have done the first part and another person helped me to do the second part.
Code below-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>

Make media query take priority over function

I am trying to make my navigation bar responsive but I am having issues making an image (our logo) appear and disappear when desired.
First of all the default is that the navigation bar has our standard logo displayed and the alternative one hidden:
Then when moving onto a smaller screen I am using a media query to change the color of the navigation bar, hide one logo, show another logo and add a hamburger menu.
Since I found that clicking the hamburger menu, and viewing the links in block display, the alternative logo sat in the way of the first link. So I used a function to hide it (triggered upon clicking on the hamburger menu)
So far so good, clicking on the hamburger menu toggles the logo appearing and disappearing. However, if you collapse the menu without going to another page the function toggles the logo on again - which is fine until you resize the page and make it larger. Then the logo just sits in the way and isn't made to disappear by the media query.
I have tried using !important tags but honestly at a bit of a loss of how to do this final step. Any feedback would be much appreciated!
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Style/Basic Styling.css"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="page">
<div id="page_container">
<!--Nav Bar Start -->
<div class="topnav" id="myTopnav">
<img id="CElogo" src="https://imgur.com/gallery/Zmuzg62" alt="CE logo" title="CE logo" >
<img id="CElogoNoTextID" class="CElogoNoText" src="https://i.imgur.com/Kr3ACDH.jpg" alt="CE logo No Text" title="CE logo No Text" >
Blog
Pricing
<a id="homeNav" class="homeNavClass" href="http://localhost:63342/untitled/Home Page/Climate Edge.html">Home</a>
☰
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("CElogoNoTextID");
if (y.style.display === "none" ) {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin:0;
}
#page {
margin:0;
background:none;
overflow:auto;
}
#page_container {
margin:0 0px;
}
#HeaderImage {
width: 100%;
line-height:1px;
z-index: 3;
}
.topnav {
overflow: hidden;
width: 100%;
margin-top: 0%;
z-index: 2;
position: absolute;
background: none;
}
#homeNav{
display:none; !important
}
.topnav a {
float: right;
color: black;
padding: 25px 16px;
text-decoration: none;
z-index: 1;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav img {
width: 130px;
margin-left: 5px;
margin-top: 7px;
position:absolute;
overflow: auto;
}
#CElogoNoTextID {
display: none;
}
.topnav .icon {
display: none;
}
#DataToAction {
width: 30vw;
margin-left: 35vw;
margin-right: 35vw;
margin-top: 5vw;
position:absolute;
}
#media screen and (min-width: 601px)and (max-width: 1000px) {
.topnav a {
font-size: 16px;
}
#DataToAction{
display:none;
}
.topnav img {
display:none;
}
#CElogoNoTextID{
display: none; !important;
}
}
#media screen and (max-width: 600px) {
#HeaderImage {
margin-top: 80px;
}
#CElogoNoTextID{
display:block;
float:left;
margin-top: 0px;
width: 90px;
}
.topnav {
background: #29ABE2;
}
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
#homeNav{
float: right;
display: block;
color: white;
}
.topnav img{
display: none;
}
#DataToAction{
display:none;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
color:black;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive a.homeNavClass {
display: block;
text-align: left; !important;
}
}
Please see the jsfiddle here

How to add a smooth transition on collapse for a responsive navigation bar?

How do I add a smooth transition when then navigation bar collapses on mobile viewports ? I tried adding the transition property to some classes but have not succeeded so far. I am trying to have the navbar behave similiar to a navbar from Bootstrap like the following example https://codepen.io/ScottMarshall/pen/JoGWEX. Thank you for the attention and support.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>

To use transition effect, you need to set height property.
add height like below, of course you need to set transition as well!
.topnav{
overflow:hidden;
...
height: 50px;
transition: .5s;
}
#media ...
.topnav.responsive {
...
height: 200px;
}
....... TADA~~ :)

Categories

Resources