I've been working on creating a dropdown menu for my API, but I'm having trouble getting the anchor links to function properly. I even attempted changing the "a" element to an onclick call with javascript:void(0) and added a function to open Gmail, but that didn't work either. Can someone please review this code? Your input is greatly appreciated. Thank you.
Here is the code snippet:
var tmenu = document.getElementById('t-menu');
var dropdown = document.getElementById('dropdown');
var bars = document.getElementById('bars');
var navbar = document.getElementById('navbar');
function ShowMenu() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
if (tmenu.style.display = 'flex') {
tmenu.style.display = 'none';
bars.style.display = "flex";
navbar.style.display = 'block';
} else {
dropdown.style.display = 'block';
navbar.style.display = 'none';
}
}
}html {
font-family: open sans, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell, helvetica neue, sans-serif;
overflow-x: hidden;
}
h2 {
font-size: 1.8rem;
}
a {
transition: 0.7s ease-in-out;
text-decoration: none;
}
a:hover {
transition: 0.7s ease-in-out;
text-decoration: underline;
}
.header-menu {
display: flex;
width: 100%;
background-color: black;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
header {
position: absolute;
inset: 0;
width: 100vw;
}
/* Navbar links */
.navbar a {
float: none;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: rgba(82, 87, 247, 1);
}
.t-menu {
display: none;
}
@media screen and (max-width: 640px) {
.navbar {
display: none;
transition: 0.7s ease-in-out;
}
.navbar a {
transition: 0.7s ease-in-out;
float: none;
display: flex;
height: auto;
}
.t-menu {
display: inline-block;
position: fixed;
z-index: 1;
width: 100%;
height: 6vh;
background-color: #555;
}
.bars-icon {
position: flex;
text-decoration: none;
color: white;
font-size: 8vw;
margin-bottom: 1vw;
margin-left: 2vw;
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />
<header>
<nav>
<div class="navbar" id="navbar">
<center>
<a class="active" href="#"><i class="fa fa-fw fa-home"> </i> Home</a>
<a href="#"><i class="fa fa-fw fa-credit-card"></i> Pricing</a>
<a href="#"><i class="fa fa-fw fa-code"></i> API</a>
<a href="#"><i class="fa fa-fw fa-book"></i> Docs</a>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7eaf3ffe2fef7d2f5fff3fbfebcf1fdff">[email protected]</a>" name="email"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</center>
</div>
</nav>
</header>
<header>
<div class="t-menu" id="t-menu">
<div class="dropdown" id="dropdown">
<div onclick="ShowMenu()" class="bars-icon" id="bars">☰</div>
</div>
</div>
</header>