CSS Menu Issue with using two dropdown sub sections - html

I am using an example of a responsive menu from w3c schools. This has single links and drop down links. I wished to replicate the drop section so have added a new section labelled dropdown 1. However when testing this setup on a mobile device it always randomly opens links from dropdown1 menu. Is this a bug or am I using the wrong approach for multi dropdown menus.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.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;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="topnav" id="myTopnav">
Home
News
x
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown 1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
</body>

Related

Dropdown Menu jumping to the left when toggled (CSS)

New member here and also a newcomer to HTML and CSS, I hope you indulge my mistakes.
I have a dropdown menu in CSS (just a burger) aligned on the right, but when I click on it, the burger is on the left. And I just don't know why.
Menu normal/untoggled
Menu when clicked/toggled
Can you help me?
Here is the code:
.navbar {
background-color: #1a1a1a;
width: 100%;
height: 4%;
text-decoration: none;
position: absolute;
float: right;
z-index: 2;
}
.navbar a {
font-size: 16px;
color: #1a1a1a;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
position: static;
width: 35px;
height: 5px;
background-color: white;
margin: 6px 10px;
border: none;
outline: none;
z-index: 30;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
float: none;
/* position: relative; */
background-color: #FFBB00;
}
.dropdown-content {
float: right;
display: none;
background-color: #1a1a1a6c;
min-width: 160px;
}
.dropdown-content a {
float: none;
display: block;
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgba(0, 0, 0, 0.458);
color: #FFBB00;
}
.dropdown:hover .dropdown-content {
float: right;
display: block;
}
<div class="navbar">
<div class="dropdown">
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropdown-content">
HOME
SHOP
CONTACT
</div>
</div>
I tried to float right and change the position. I tried text align and all that.
I just want the burger to stay on the same place. That's all.
Thank you in advance!

Dropdown Menu Does Not Show Up Whenever I Clicked The Toggle Icon and As I Navigate Downwards

This is coming from the W3Schools Code. I am having an issue regarding the drop-down menu function where it disappears or does not show whenever I clicked the toggle icon. Whenever I clicked the toggle icon, I would always go up to see the tabs.
Source: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
Here is the code:
HTML
<!-- Responsive Top Navbar -->
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a class="topnav-right" href="#">Sign Up</a>
<a class="topnav-right" href="#">Sign In</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
CSS
/* Navbar Top */
body {
margin:0;
font-family:Arial
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}

1) Firstly, you need to include javascript.
and wrap the javascript inside the "script" as below :
`<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
}
else {
x.className = "topnav";
}
}
</script>
`
2) Second, add before inside `<head>` this external library :
`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> `
3) Add some longer content to see if the toggle menu work well after scrolling down.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.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 {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>

Submenu opening is creating problem leads to clicked on link

<!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}
.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;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Bing
Yahoo
Google
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
This is a responsive dropdown menu of W3 Schools. The problem is that when I click on dropdown1 and then click on dropdown2 to open the submenu, automatically the third link of dropdown2 is clicked. This is creating a bad user experience.
Also, I want that when the user clicks on dropdown1 to open the submenu then the user will be able to close dropdown1 when clicking on it again.

How do I make the menu always visible on top?

I have created the menu which works fine with all the links and responsiveness but there is some issue.
Example:
When I click on about us the menu get disappear but link is working fine the only issue is my menu disappear from the page. I want my menu to be there like fixed. Can anyone help me to figure out the issue.
<!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}
.topnav {
overflow: hidden;
background-color: #ea8537;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Google
Gmail
</div>
</div>
Disclaimer
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>

.navbar { /* navbar = your "topnav" */
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
reference:https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Responsive Navbar with Dropdown don't show dropdown menu

I have to put a respnsive menu with submenus.
I found this lesson : https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
The menu itself comes out, but when I click the "Dropdown" button, the submenus are not displayed at all.I tried to change some code but nothing get.
How can I fix this or where to look for the problem?
Thanks in advance!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#navbaronder {
background-color: #dddddd;
margin: 155px 0px 0px 0px; /* viso4ina na drop down menuto*/
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 500;
}
<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}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<div id="navbaronder">
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
</div>