I made a dropdown menu in my header, and when I click the moon icon (at the top right), the dropdown list doesn't show up but the function does get called when I click the icon. I've tried to use buttons but then clicking on the icon doesn't work.
Any one help me with this? I am new to this thanks.
Html:
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg" class="dropbtn" onclick="Dropdown()"></i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
CSS:
.dropbtn {
background-color: #24252A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
Javascript:
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
You have two class attributes in your icon element.
When the user clicks the icon there are two click events - the first happens on the icon itself and the show class is correctly added.
The second is the general click on the window. Having two classes confuses the JS matches function which reckons the element does not match (ie would not get selected with .dropbtn) [probably not exactly 'confused' it just looks at the first class attribute so misses the dropbtn value] so it clears the show class.
If you put all the icon's classes into one attribute value then things work OK.
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #24252A;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg dropbtn" onclick="Dropdown()">click me</i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
You could instead consider using event.stopPropagation in the first event handler which would stop the click event going through to the whole window.
I used to have that problem.
But, you don't have to reinvent the wheel, I recommend using a CSS framework, like Materialize or Bootstrap.
I recommend Materialize, it's easy to use and you just have to initialize each element you want to use.
I show you an example of navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Materialize initializers -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});</script>
</body>
</html>
Related
I have a navbar that contains three elements. Horizontally, from left-to-right, they are: socialMediaIcons, logoArea, and navBarOptionsList.
I wrote javascript and CSS such that, when the user begins to scroll down the page, the socialMediaIcons and navBarOptionsList's visibility change to hidden.
The problem is, the socialMediaIcons element lags by about half a second to become hidden after the user scrolls down. The navBarOptionsList hides immediately after even slightly scrolling down the page (this is the expected behaviour -- and it is what I'd like the socialMediaIcons to do too).
Below is the CSS (which is where I suspect the problem is), as well as the Javascript (detailing the logic for hiding the two elements) and HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS, and stupid fontawesome shyt -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Required CDNs: jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="../resources/codigoinitiativefavi.ico"/>
<!--Custom CSS Stylesheet-->
<link rel="stylesheet" href="../styles.css"/>
<title>Codigo Initiative</title>
</head>
<body>
<nav class="navBar">
<div class="socialMediaNavBarArea">
<ul class="socialMediaIconList">
<li class="socialMediaIcon"><i class="fab fa-facebook-f"></i></li>
<li class="socialMediaIcon"><i class="fab fa-twitter"></i></li>
<li class="socialMediaIcon"><i class="fab fa-youtube"></i></li>
<li class="socialMediaIcon"><i class="fab fa-github"></i></li>
<li class="socialMediaIcon"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="logoArea">
<img id="navBarLogocaster" src="../resources/codigoinitiativewhite.png" alt="Codigo Initiative">
</div>
<!--TODO: Nav bar options list font style should match the Codigo Initiative logo font style-->
<div class="navBarOptionsAreaFullScreen">
<ul class="navbarOptionsList">
<li class="navItem">
<a class="navLink" href="">Home</a>
</li>
<li class="navItem">
<a class="navLink" href="">Resources</a>
</li>
<li class="navItem">
<a class="navLink" href="">Curriculums</a>
</li>
<li class="navItem">
<a class="navLink" href="">Contact</a>
</li>
</ul>
</div>
<div class="hamIconNavOptions">
<ul class="hamIconNavOptionsList">
<li class="hamburgerIconNavOptions">☰
<ul id="hamburgerIconNavOptionsNestedList">
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Home</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Resources</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Curriculums</a></li>
<li class="hamburgerIconNavOptionsNestedListItem"><a class="navOptionAnchorItem" href="">Contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="placeholder"></div>
</body>
<footer>
<script src="../index.js"></script>
</footer>
</html>
CSS:
/*Hamburger Icon styling*/
.hamburgerIconNavOptions{
color: white;
padding-top: 20px;
}
/*Styling for the hamburger icon (which is really a list)*/
.hamIconNavOptionsList{
margin: 0;
padding: 0;
list-style: none; /*removing the bullet point*/
}
/*styling the nested list in the hamburger icon*/
#hamburgerIconNavOptionsNestedList{
margin: 0;
padding: 0;
list-style: none; /*Removiing the bullet points*/
background-color: #13204f;
opacity: .5; /*Making this bad boy transparent. (0 is completely transperent, 9 is solid black)*/
}
/*Removing the default underlining provided by the anchor tag's default styling*/
.navOptionAnchorItem{
text-decoration: none; /*Removing the default styling from the anchor element*/
color: white;
}
/*Removing the underlining of links provided by the anchor tag's default styling*/
.navOptionAnchorItem:link {
text-decoration: none;
}
/*Removing the underlining that occurs by default on anchor tags when hovering over them.*/
.navOptionAnchorItem:hover {
text-decoration: none;
}
/*Styling each list item within the hamburger icon's nested list*/
.hamburgerIconNavOptions{
float: left;
width: 200px;
height: 40px;
}
#media(max-width: 1200px) {
/*This logic will execute when the screen's width becomes too small to display everything*/
.socialMediaIconList{
display: none; /*Will hide the list items when the screen's width is too small to display them*/
}
.socialMediaIconList.toggleCls{
display: none; /*will remove the social media icon list if the screen isn't wide enough to display it*/
}
.hamburgerIconSocialMedia {
display: none; /*TODO: Don't really need a hamburger bar to begin with. Need to come back and remove this.*/
}
/*Same stuff as above, except for the navBar options list*/
.navbarOptionsList{
display: none;
}
#hamburgerIconNavOptionsNestedList.toggleCls{
display: block;
}
/*The screen is too small. But hide the nested list that belons to the hamburger icon. Will be displayed when the hamburger icon is clicked.*/
#hamburgerIconNavOptionsNestedList{
display: none;
}
}
/*Make the hamburger icon disappear when the screen is large enough to display all list view items*/
#media(min-width: 1199px) {
.hamIconNavOptions{
display: none; /*Hides the hamburger icon when the screen is large enough to display everything*/
}
.socialMediaIconList{
display: initial; /*Shows the social media links*/
}
.navbarOptionsList{
display: initial;
}
}
.navBar {
display: flex;
flex-direction: row; /*Aligns items horizontally*/
flex-wrap: nowrap; /*Prevents overflow wrapping. We'd rather everything get packed on a single row.*/
padding: 10px;
background-color: #13204f;
height: 125px;
position: fixed;
width: 100%;
}
.socialMediaNavBarArea {
position: relative;
width: 25%;
padding: 30px 0;
text-align: center;
}
.logoArea {
position: relative;
width: 50%;
text-align: center;
}
.navBarOptionsAreaFullScreen {
position: relative;
width: 30%;
padding: 30px 0;
text-align: center;
font-size: 15px;
padding-right: 30px;
}
/*Social Media area*/
.socialMediaIcon {
list-style: none;
margin: auto;
display: inline-block;
font-size: 10px;
padding: 10px 10px;
color: white;
border: 1px solid white;
border-radius: 50%;
transition: .5s;
}
.socialMediaIconList {
padding-left: 0px;
padding-right: 90px;
}
.socialMediaNavBarIcons {
top: 40%;
left: 50%;
transform: translate(-53%, -50%);
position: absolute;
}
.socialMediaIcon:hover {
color: #565759;
border: 1px solid #565759;
transition: .75s;
}
/*Navigation Bar logo area*/
#navBarLogocaster {
max-width: 100%;
max-height: 75%;
/*Aligns the image center horizontal and vertical*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Navigation Bar options area*/
.navItem {
display: inline;
}
.placeholder {
height: 5000px;
}
.navLink {
padding: 5px;
color: white;
}
.navLink:hover {
text-decoration: none;
color: #565759;
transition: .75s;
}
Javascript:
/**
* The following logic controls what will happen when the user scrolls down on the screen.
* The navbar will decrease in heigh slightly.
*/
window.onscroll = function() {configureNavBar()};
function configureNavBar() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
//The user is scrolling down, so minimize the nav bar, and hide all corollary navbar items to reduce clutter.
document.querySelector(".navBar").style.height = "90px";
hideSocialMediaIcons();
hideNavBarOptions();
} else {
//The user has scrolled back up to the top. Display all corollary navbar options/details.
document.querySelector(".navBar").style.height = "120px";
unhideSocialMediaIcons();
unhideNavBarOptions();
}
}
/**
* Will hide the social media icons (if it is even being displayed at all)
*/
function hideSocialMediaIcons() {
let socialMediaIconList = document.querySelector(".socialMediaIconList");
//If the social media icons are being displayed, hide them.
if(socialMediaIconList.style.visibility != "hidden") {
socialMediaIconList.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
/**
* Will hide the navbar's (full-screen) options when scrolling down.
*/
function hideNavBarOptions(){
let navBarOptions = document.querySelector(".navbarOptionsList");
//If the social media icons are being displayed, hide them.
if(navBarOptions.style.visibility != "hidden") {
navBarOptions.style.visibility = "hidden";
} else {
//no further action needed, as the social media icons are already hidden.
}
}
Because there is transition duration set for socialMediaIcon class but for .navBarOptionsList no duration set.
I am looking for some (probably easy) advice which I cant seem to find googling. I have a hoverable dropdown menu such as:
/* Dropdown Button */
.btn {
background-color: #D6182D;
color: white;
padding: 8px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
border: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .btn {
background-color: rgb(134, 30, 42);
}
<center>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chose a month to display</a>
<div class="dropdown-content">
<a class="nav-link" href="/jan">
<font color="black">January 2018</font>
</a>
<a class="nav-link" href="/feb">
<font color="black">February 2018</font>
</a>
<a class="nav-link" href="/mar">
<font color="black">March 2018</font>
</a>
<a class="nav-link" href="/tot">
<font color="black">Total</font>
</a>
</div>
</div>
</center>
Basically taken from w3schools..
Now instead of "Chose a month to display" I would like to display the chosen option once someone clicks on it. Do you guys have any idea on how to change the code to do so?
Looking forward to your answers :-)
I made some changes in your HTML to make it more semantic and for dropdown text, you can try plain javascript. I hope, This will help you.
For old value, you can store your value somewhere, like in localstorage
For Example, I am saving old selected value in local storage.
const months = document.getElementsByClassName("dropdown-content");
if(localStorage.getItem("oldval")){
document.getElementById("dropdownMenuLink").innerHTML =
localStorage.getItem("oldval");
}
Array.from(months).map(month=>{
month.addEventListener("click",(e)=>{
let selectedValue = e.target.textContent;
document.getElementById("dropdownMenuLink").innerHTML =
selectedValue;
localStorage.setItem("oldval",selectedValue);
});
});
const months = document.getElementsByClassName("dropdown-content");
Array.from(months).map(month=>{
month.addEventListener("click",(e)=>{
e.preventDefault();
let selectedValue = e.target.textContent;
document.getElementById("dropdownMenuLink").innerHTML = selectedValue;
});
});
/* Dropdown Button */
.btn {
background-color: #D6182D;
color: white;
padding: 8px;
font-size: 16px;
border: none;
min-width: 200px;
display:inline-block;
text-decoration:none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
border: 10px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
list-style: none;
padding:0;
margin:0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .btn {
background-color: rgb(134, 30, 42);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<center>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Chose a month to display</a>
<ul class="dropdown-content">
<li><a class="nav-link" href="/jan">
January 2018
</a></li>
<li><a class="nav-link" href="/feb">
February 2018
</a></li>
<li><a class="nav-link" href="/mar">
March 2018
</a></li>
<li><a class="nav-link" href="/tot">
Total
</a></li>
</ul>
</div>
</center>
</body>
</html>
as i can see you are using <div> and <a> to achieve a drop-down which is not wrong at all but is not correct way of html to do it.
Read about <select> and <option> tag which will help you to get a drop-down effect as well as you can set value inside <option> tag dynamically as you click it. by using getElementById('id-of-element')
read about getElementById here
Also if you want some redirection when user clicks it you can use <a> tag inside <option> tag.
select tag
hope this will help you, post any doubts if you have will be happy to help you :-)
I'm trying to create a pretty basic mobile drop-down menu that expands on click for the top-right nav of this codepen portfolio page project for Free Code Camp. The menu never shows up, but when I inspect the element it seems like the javascript function is actually working, with the "show" CSS class being added and removed to the mobileNavDrop div.
The invisible menu also seems to be located on the page where it's supposed to be, as can be seen in this screenshot using the inspect element tool:
Invisible drop-down menu highlighted with inspect element tool
I've tried pushing it all the way forward with z-index and making the banner invisible to see if it's hiding behind things, but it isn't. I even tried just having the menu start as visible rather than with "display: none;" and it still doesn't show up on the page.
The advice I've gotten elsewhere is to just use jquery and bootstrap, but I'd hoped to understand things more by trying to just write everything from scratch. So it's possible something I wrote for the responsive layout is conflicting?
Here's at least the sections of code that I thought would be relevant. Thanks!
HTML
<div class='container-navbar'>
<div class='navbar'>
<div class='row'>
<div class='col-sm-2 col-md-1'>
<ul class='nav-left'>
<li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
</ul>
</div>
<div class='col-sm-2 col-md-3'>
<div class='mobile-nav'>
<i onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></i>
<div id='mobileNavDrop' class='mobile-nav-drop'>
<a href='#about'>about</a>
<a href='#portfolio'>the work</a>
<a href='#contact'>contact</a>
</div>
</div>
<ul class='nav-right'>
<li><a href='#about'>about</a></li>
<li><a href='#portfolio'>the work</a></li>
<li><a href='#contact'>contact</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
.mobile-nav-icon {
padding: 1.25em;
}
.mobile-nav-icon:hover, .mobile-nav-icon:focus {
background: #40514f;
color: #fff;
}
.mobile-nav {
position: relative;
display: inline-block;
float: right;
overflow: visible;
}
.mobile-nav-drop {
display: none;
position: absolute;
right: 0;
background: #ccc;
min-width: 10em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}
.show {
display: block;
}
.mobile-nav-drop a {
color: #000;
padding: 1em;
display: block;
}
.mobile-nav-drop a:hover {
background: #aaa;
}
JS
function mobileNavDrop() {
document.getElementById('mobileNavDrop').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.mobile-nav-icon')) {
var dropdowns = document.getElementsByClassName('mobile-nav-drop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
You need:
.show {
display: block;
position: absolute; /* add this line, */
top: 0; /* and this one */
}
Plus, make sure the overflow is visible in every container of that nav that might not be large enough to contain the drop-down menu.
You are probably not seeing the icon because you have not included the FontAwesome library for the icon (fa fa-bars).
try adding this cdn reference to your <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
or download and install a local copy.
function mobileNavDrop() {
document.getElementById('mobileNavDrop').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.mobile-nav-icon')) {
var dropdowns = document.getElementsByClassName('mobile-nav-drop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}else
{
openDropdown.classList.contains('show');
}
}
}
};
.mobile-nav-icon {
padding: 1.25em;
}
.mobile-nav-icon{
background-color:grey;
}
.mobile-nav-icon:hover, .mobile-nav-icon:focus {
background: #40514f;
color: darkgrey;
}
.mobile-nav {
position: relative;
display: inline-block;
float: right;
overflow: visible;
}
.mobile-nav-drop {
position: absolute;
right: 0;
background: #ccc;
min-width: 10em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}
.hide{
display: none;
}
.show {
display: block;
}
.mobile-nav-drop a {
color: #000;
padding: 1em;
display: block;
}
.mobile-nav-drop a:hover {
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-navbar'>
<div class='navbar'>
<div class='row'>
<div class='col-sm-4 col-md-1'>
<ul class='nav-left'>
<li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3'>
<div class='mobile-nav'>
<div onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></div>
<div id='mobileNavDrop' class='mobile-nav-drop hide'>
<a href='#about'>about</a>
<a href='#portfolio'>the work</a>
<a href='#contact'>contact</a>
</div>
</div>
<ul class='nav-right'>
<li><a href='#about'>about</a></li>
<li><a href='#portfolio'>the work</a></li>
<li><a href='#contact'>contact</a></li>
</ul>
</div>
</div>
</div>
</div>
In your javascript. I added an else statement so it toggles back and forth.
Your statement only removes 'show' but does not add it back.
I have a menubar with 2 options which shows dropdowns on click, technically theyre all shown even you click only one. All I wanted to do is to hide other dropdowns after when I click other menu items.
What is wrong with my code?
BODY:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
font-family: verdana;
font-size: 14px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="jquery.js"></script>
</style>
The problem with your code is that it toggles both dropdowns. Therefore, when they are both not shown they get this class.
You can do something like this:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function hideDropdowns(excludeId) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) {
openDropdown.classList.remove('show');
}
}
}
function myFunction(id) {
id.classList.toggle("show");
hideDropdowns(id.id);
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideDropdowns();
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
You need something like this
jsFiddleDemoNavBar
I dont think you need to go through all that code to do what your looking for as i understand it. Just use a .hide class to hide the dropdowns by default on page load and then toggle them using the button onclick with call(this) and nextElementSibling.
Here is the code.
<style>
.hide{
display:none;
}
</style>
<body>
<ul>
<li class="File">
File
<div class="dropdown-content hide" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content hide" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<script>
var drptochoose;
function myFunction() {
var isAlreadyOpen = false;
if(!this.nextElementSibling.classList.contains('hide'))
{
// if the clicked button dropdown is already open then use this bool to not show it again.
isAlreadyOpen = true;
}
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (!openDropdown.classList.contains('hide')) {
openDropdown.classList.toggle("hide");
}
}
if(!isAlreadyOpen)
{
// if the dropdown was hidden when clicked then show it
this.nextElementSibling.classList.toggle("hide");
}
}
</script>
</body>
Hope this helps.
window.onclick = function(e) {
if (e.target.matches('.dropbtn')) {
var allDropDown = document.querySelectorAll('.dropdown-content');
//This will hide all the dropdown for everytime you click
[].forEach.call(allDropdown, function(dropdown){
dropdown.classList.add('hide');
});
//This will show the subdrop down of that menu
var dropdown = e.target.parent.querySelector(".dropdown-content");
dropdown.classList.add('show');
}
}
}
The below code has two drop down menus which load container on button click and drop down closes on clicking anywhere on page. Though the window load works but the pages inside takes too much time to load even on local server obviously because my javascript code isn't the way it should. So guys what should my javascript code like so that it loads page correctly and at the same time closes drop down on clicking anywhere on page [if both drop downs are open both should close on click like in snippet].
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
$("#notificationContainer").load("notifications.php");
document.getElementById("myDropdown").classList.remove("show");
$("#scoreContainer").load("score.php");
document.getElementById("myDropdown2").classList.remove("show");
}
.dropdown,
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content,
.dropdown-content2 {
display: none;
background-color: #fff;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0;
}
.dropdown-content a,
.dropdown-content2 a {
padding: 10px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropbtn {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: red;
}
.dropbtn2 {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: green;
}
.dropdown-content,
.dropdown-content2 {
border: 2px solid #c6c6c6;
border-top: none;
}
#notificationContainer,
#scoreContainer {
min-width: 400px;
min-height: 100px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td style="padding-right:15px;">
</td>
<td style="padding-right:15px;">
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">one</button>
<div id="myDropdown2" class="dropdown-content2">
<div id="scoreContainer"></div>
</div>
</div>
</td>
<td style="padding-right:15px;">
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">two</button>
<div id="myDropdown" class="dropdown-content">
<div id="notificationContainer"></div>
</div>
</div>
</td>
</tr>
</table>
The above javascript is modified from the below single drop down menu code which loaded the page inside container instantly, but my modified version [above] takes too much time:
<script type="text/javascript">
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
$( "#notificationContainer" ).load( "notifications.php" );
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
there is nothing inherently wrong or slow about your javascript code. have you tried inspecting how long your PHP code runs? because that's where I would start looking for the problem.
There is nothing wrong with your dropdowns. They work fine. But they lack in design and the code looks way too much for such small control. I suggest you use Bootstrap. CSS and Javascript codes are external and you just need to place your dropdown in your project by coding some HTML.
There are several different designs and the way it works simpler than what you coded. Take a look at the below example and this page for more info about it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdown Example</h2>
<p>Nice design, easy usage, good performance.</p>
<p><b>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</b></p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>THIS</li>
<li>IS</li>
<li>A DROPDOWN</li>
</ul>
</div>
</div>
</body>
</html>