I need help with figuring out how to focus the 'clicking' part of this dropdown navbar icon so that I don't have to click a little to the left of the icon (also the other navbar items) since I'm trying to recreate Mac OS's navbar.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 5px 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">
<i class="fa-solid fa-power-off"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
IMG:
Problem
I found the source where OP came from and I am not surprised why you ran into trouble. W3Schools is a good resource because it's simple and never over explains things but at times it omits or just overlooks certain details. In the W3School example "Dropdown Menu Inside a Navigation Bar" the following segment of a CSS ruleset is wrong:
.dropbtn:focus {
background-color: red;
}
focus event only applies to the these tags:
<input>
<textarea>
<select>
<a>
It may vary between browsers but the above list is standard. So <button> is usually not focusable.
Solution
Change the <button> into an <a>
Add e.preventDefault(); to the event handler so the page won't jump when the <a> is clicked.
The rest of the changes are recommended, but not necessary. Although I strongly suggest that you don't use inline event handlers:
<button onclick="lame(this)">Don't do this</button>
Instead use:
// onevent property
document.querySelector('button').onclick = better;
OR
// event listener
document.querySelector('button').addEventListener('click', best);
const menu = document.querySelector("menu");
document.querySelector('.btn').onclick = toggleMenu;
function toggleMenu(e) {
e.preventDefault();
menu.classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.btn, .btn *') && menu.classList.contains('show')) {
menu.classList.remove('show');
}
}
html {
font: 300 2vmax/1.2 'Segoe UI';
}
nav {
display: flex;
overflow: hidden;
background-color: #333;
}
nav a {
display: block;
padding: 0.75rem 1.2rem;
color: white;
text-align: center;
text-decoration: none;
}
.dropdown {
min-width: 7.75rem;
overflow: hidden;
}
.btn {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0.75rem 1.2rem;
border: none;
outline: none;
color: white;
text-align: left;
}
.btn * {
display: block;
font-weight: 300;
}
.btn i {
padding-top: 0.15rem;
}
nav a:hover,
.btn:focus {
background-color: red;
}
menu {
position: absolute;
display: none;
min-width: 7.75rem;
margin: 0;
padding-left: 0;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
menu a {
padding: 0.5rem 1.2rem;
text-align: left;
color: black;
}
menu a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
Home
News
<div class='dropdown'>
<a href='#' class="btn"><b>Menu</b>
<i class="fa fa-chevron-circle-down"></i>
</a>
<menu>
Link 1
Link 2
Link 3
</menu>
</div>
</nav>
Related
I'm not sure what's causing the form button to fire the event of turning the page theme back to white after the dark mode has been clicked and enabled.
Not sure if that may be confusing, but for example if you open the page it's automatically on the light mode theme, when you click "dark" to switch the theme to dark and then click the button "search" while the theme is in "dark", the page will switch back to "light". What am I doing wrong or missing out? Please advise. Also, how could I refractor this JS better and simpler?
Thanks!
HTML - left out the head part intentionally
<html lang="en" color-mode="light">
<body>
<header class="header-container">
<h1 class="title">devfinder</h1>
<div class="light-dark mode">
<span
class="theme-toggle-btn light-hidden light"
aria-label="light theme toggle button">
LIGHT
<img class="light-icon" src="assets/icon-sun.svg" alt="" />
</span>
<span
class="theme-toggle-btn dark-hidden"
aria-label="dark theme toggle button">
DARK
<img src="assets/icon-moon.svg" alt="" />
</span>
</div>
</header>
<main class="content-container">
<section>
<form autocomplete="off" class="form" id="search">
<input
type="text"
id="search"
placeholder="Search GitHub username…" />
<button class="btn">Search</button>
</form>
JS
const themeBtn = document.querySelectorAll(".theme-toggle-btn");
const toggle = function (e) {
if (e.currentTarget.classList.contains("light-hidden")) {
document.documentElement.setAttribute("color-mode", "light");
localStorage.setItem("color-mode", "light");
return;
}
document.documentElement.setAttribute("color-mode", "dark");
localStorage.setItem("color-mode", "dark");
};
themeBtn.forEach((btn) => {
btn.addEventListener("click", toggle);
});
CSS
:root {
--monoFont: 'Space Mono', monospace;
--accent-blue: #0079FF;
--error-red: #F74646;
--light-hover: #60ABFF;
}
:root[color-mode="light"] {
--primary-text-color:#697C9A;
--secondary-text-color: #4B6A9B;
--accent-color: #2B3442;
--background-color: #F6F8FF;
--container-background: #FEFEFE;
--font-color: #222731;
}
:root[color-mode="dark"] {
--primary-text-color: #FFFFFF;
--background-color: #141D2F;
--container-background: #1E2A47;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root[color-mode="light"] .light-hidden,
:root[color-mode="dark"] .dark-hidden {
display: none;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-color);
height: 100vh;
margin: 0;
color: var(--primary-text-color);
font-family: var(--monoFont);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2em;
}
.header-container, .content-container {
width: 100%;
max-width: 730px;
}
/* header title */
.title {
color: var(--font-color);
font-size: 1.63rem;
}
/* theme toggle btn */
.theme-toggle-btn {
background-color: var(--background-color);
border: none;
color: var(--primary-text-color);
font-size: .7rem;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
}
.theme-toggle-btn img {
margin: 0 0 -0.45em 0.75em;
width: 20px;
height: 20px;
}
/* search form */
.form {
position: relative;
display: flex;
align-items: center;
height: 69px;
}
.form input {
background-color: var(--container-background);
border: none;
width: 100%;
padding-left: 1.5em;
margin-bottom: 2em;
color: var(--font-color);
font-size: 1.05rem;
font-family: inherit;
font-weight: 400;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;;
}
.form input::placeholder {
color: var(--secondary-text-color);
}
.btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-80%);
width: 100%;
max-width: 106px;
height: 50px;
background-color: var(--accent-blue);
border: none;
color: #FFFFFF;
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
}
.btn:hover {
background-color: var(--light-hover);
}
I think when you're clicking the "Search" button, it's refreshing the page and reloads the html template. Because you have "color-mode="light" within the html element, it will then load the page in light mode rather than dark mode.
I think the problem is: your not consuming the selection from localStorage. To persist the user selection, you should check the preference in localStorage when the page loads.
I'm not super familiar with JS. I used the W3Schools tutorial for creating an on-click dropdown menu as a reference and added a second menu. However, only the second dropdown menu listed in the javascript maintains the functionality of closing when the user clicks outside the dropdown. (I can switch the order of the functions listed in the JS, and changing nothing else, that switches which menu has that close-when-click-outside functionality.)
Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1,
.dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
Thank you!
You are only allowed to have one onclick.
The second will overwrite the first
Instead use eventListener and delegation
Notice I removed the inline click and I now only have one class instead of a class per button
window.addEventListener("load", function() {
// click the dropdown if the user clicks outside it unless that is a button
document.addEventListener("click", function(e) {
const tgt1 = e.target.closest('.dropdown-content');
const tgt2 = e.target.closest('.dropbtn');
if (!tgt1 && !tgt2) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
}
})
document.querySelector(".navbar").addEventListener("click", function(e) {
const tgt = e.target.closest("button");
if (tgt && tgt.matches('.dropbtn')) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
document.getElementById(tgt.dataset.id).classList.add('show');
}
})
})
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" data-id="drop1">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" data-id="drop2">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
📌 Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
✨ I'm going to make the smallest possible change to your code to make it work, so that you can best learn what happened. I'm not going to redesign your approach.
window.onclick is a variable, and you are assigning a value to it twice. The second function you assign it, for Dropdown 2, overwrites the first, which was for Dropdown 1.
The problem is easily solved by combining the logic into one function assigned to window.onclick as below.
Another simple, and probably better fix, is to use window.addEventListener("click", function(event) { }) rather than window.onclick.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1, .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
I have this piece of code:
function dropdown() {
let dropdownText = document.querySelector(".dropdown-button");
let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];
var aux = dropdownText.innerHTML;
dropdownText.innerHTML = item.innerHTML;
item.innerHTML = aux;
document.querySelector(".dropdown-items").style.display = "none";
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
margin: 0 50px 0 50px;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown:hover .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn" onclick="dropdown();">Interrupt</div>
</div>
</div>
As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?
Inline styles override any stylesheet styles, as they have maximum CSS specificity.
Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.
// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');
// iterate over the list
for (const dropdown of dropdowns) {
// for each dropdown, add a mouseenter and mouseleave listener
dropdown.addEventListener('mouseenter', function(event) {
dropdown.classList.add('open');
});
dropdown.addEventListener('mouseleave', function(event) {
dropdown.classList.remove('open');
});
// Now add a click listener to each <div class="dropdown-items">
// that transfers the text and closes the dropdown
dropdown.querySelector('.dropdown-items').addEventListener(
'click',
function(event) {
this.previousElementSibling.textContent = this.textContent;
dropdown.classList.remove('open');
}
);
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown.open .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Interrupt</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Whatever</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Another one</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Here we go</div>
</div>
</div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
So I am creating a responsive navbar.
When a user is using a phone or minimizes the browser, A hamburger icon should appear like so:
So I created a js function that whenever a user clicks on the icon, he/she should see all the links available. but when I check the console in my browser, it says that addEventListener is null. I don't think I have defined my function wrong and have check the docs again to see if I write the code wrongly but it's not that.
HTML
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
font-size: 18px;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
#media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
and JS:
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
It is saying Uncaught TypeError: Cannot read property 'addEventListener' of null
The expected result should make the links appear when the hamburger icon is clicked.
Try adding your code inside document onload. when you are trying bind click event your dom is not yet ready, so that's why your navBarToggle is null.
document.onload = function(e){
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
}
My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
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;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.