D
Deleted member 6109
Guest
Hi all, this is my first post so hopefully I have followed protocol right.
I have copied a Responsive Topnav with Dropdown script from W3 Schools and tried to add submenus following their tutorials but there are two things I cannot seem to get right.
The first is the submenus correctly show to the right of the dropdown menus but not positioned next to the parent menu where they should, they position themselves at the top.
The other issue is I cannot get them responsive.
There seems to be a blank space when hovering over the dropdown menu where the submenus should be.
I've tried different styles but each one doesn't do what I want or wrecks the navbar entirely.
To view a temp link to view it online see here.
Hopefully someone here can show me how this should be done with my code below.
I have copied a Responsive Topnav with Dropdown script from W3 Schools and tried to add submenus following their tutorials but there are two things I cannot seem to get right.
The first is the submenus correctly show to the right of the dropdown menus but not positioned next to the parent menu where they should, they position themselves at the top.
The other issue is I cannot get them responsive.
There seems to be a blank space when hovering over the dropdown menu where the submenus should be.
I've tried different styles but each one doesn't do what I want or wrecks the navbar entirely.
To view a temp link to view it online see here.
Hopefully someone here can show me how this should be done with my code below.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title Here</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="your.css">
<link rel="canonical" href="/website.html">
<script src="yourscript.js" defer></script>
<style>
.topnav {
overflow: hidden;
background-color: transparent;
}
.topnav a {
float: left;
display: block;
color: #00009c;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: 500;
}
.active {
color: #336f4b;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: #336f4b;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
position:relative;
float: none;
color: #336f4b;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
color: #325a08;
}
.dropdown-content a:hover {
background-color: #325a08;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.submenu1,
.submenu2,
.submenu3,
.submenu4,
.submenu5,
.submenu6 {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 0;
left: 100%;
display: none;
}
.dropdown-content a:hover + .submenu1,
.submenu1:hover,
.dropdown-content a:hover + .submenu2,
.submenu2:hover,
.dropdown-content a:hover + .submenu3,
.submenu3:hover,
.dropdown-content a:hover + .submenu4,
.submenu4:hover,
.dropdown-content a:hover + .submenu5,
.submenu5:hover,
.dropdown-content a:hover + .submenu6,
.submenu6:hover {
display: block;
}
@media screen and (max-width: 1200px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1200px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content, .submenu1, .submenu2, .submenu3, .submenu4, .submenu5, .submenu6 {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block;width: 100%;text-align: left;
}
}
.topnav .search-container {
display: flex;
align-items: center;
}
.topnav .input-container {
display: flex;
align-items: center;
margin-right:20px;
background: #fff no-repeat center right;
border: 1px solid #336f4b;
border-radius: 4px;
padding: 8px;
box-sizing: border-box;
}
input[type="text"] {
flex: 1;
border: none !important; /* Remove the default border */
outline: none !important;
font-size: 16px;
padding: 0;
margin: 0;
background: transparent;
}
.topnav .input-container button[type="submit"] {
border: none;
outline: none;
background: transparent;
cursor: pointer;
}
@media screen and (min-width:320px) and (max-width:1199px) {
.topnav .search-container {
display: flex;
align-items: center;
margin-top:15px;
}
}
</style>
</head>
<body>
<nav class="topnav" id="myTopnav" aria-label="main navigation menu">
<a href="javascript:void(0);" style="font-size: 30px" class="icon" onclick="myFunction()">☰</a>
<a href="/" class="active">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Braggin</a>
<a href="#">Forum</a>
<div class="dropdown">
<button class="dropbtn">
Product Reviews<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Accessories</a>
<div class="submenu1">
<a href="#">Apparel</a>
<a href="#">Storage</a>
<a href="#">Tools</a>
</div>
<a href="#">Electronics</a>
<div class="submenu2">
<a href="#">Fish Finders</a>
<a href="#">GPS</a>
<a href="#">Radar</a>
<a href="#">Radios</a>
</div>
<a href="#">Rods N Reels</a>
<div class="submenu3">
<a href="#">Bait Casting Reels</a>
<a href="#">Bait Casting Rods</a>
<a href="#">Ice Fishing Reels</a>
<a href="#">Ice Fishing Rods</a>
<a href="#">Spinning Fishing Reels</a>
<a href="#">Spinning Fishing Rods</a>
<a href="#">Surf Fishing Reels</a>
<a href="#">Surf Fishing Rods</a>
</div>
<a href="#">Safety Equipment</a>
<div class="submenu4">
<a href="#">E-purbs</a>
<a href="#">Flares</a>
<a href="#">PFD's</a>
</div>
<a href="#">Tackle</a>
<div class="submenu5">
<a href="#">Lures</a>
<a href="#">Line</a>
<a href="#">Nets</a>
</div>
<a href="#">Watercraft</a>
<div class="submenu6">
<a href="#">Kayaks</a>
<a href="#">Pontoon Boats</a>
<a href="#">Trolling Motors</a>
</div>
</div>
</div>
<a href="#">Pro's Section</a>
<a href="#">Pro's Q&A</a>
<div class="search-container">
<form action="/action_page.php">
<div class="input-container">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
</nav>
<!-- Deferred CSS -->
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
<!-- End Deferred CSS -->
<!-- Begin Topnav JS -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- End Topnav JS -->
</body>
</html>
