Develop Reference

Need help toggling dropdown menus using the same class (Javascript)

I'm trying to get this to work for all elements using the class-name '.sub-menu-parent', but I can only get it to work for the first instance of it.
I have tried using a for loop with the index of parentClass, but it doesn't seem to work. Same goes with the '.sub-menu-child' class.
HTML
<nav>
<div class="row">
<img src="resources/img/logos/HTH_Logo_1_2.png" alt="A logo that says 'hearts that heal'" class="logo">
<ul class="main-nav">
<li>Home</li>
<li>About Us <i class="ion-android-arrow-dropdown"></i>
<ul class="drop-down-main sub-menu--child">
<li>Who We Are</li>
<li>Mission Statement</li>
<li>Vision Statement</li>
<li>Our Values</li>
<li>Goals</li>
<li>Objectives</li>
</ul>
</li>
<li>Photo Gallery <i class="ion-android-arrow-dropdown"></i>
<ul class="drop-down-main sub-menu--child">
<li>Group Photos</li>
<li>Retreat Photos</li>
<li>Members Photos</li>
<li>Honorary Members Photos</li>
<li>Our Beloved Children</li>
<li>Activities and Sponsorship Photos</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS
/* ----- MAIN NAV ----- */
.main-nav {
float: right;
list-style-type: none;
margin-top: 32.5px;
}
.main-nav li {
display: inline;
text-align: center;
}
.main-nav li a:link,
.main-nav li a:visited {
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-weight: 400;
font-size: 80%;
background-color: #c95a6c; /* #484066 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-nav li a:hover,
.main-nav li a:active {
background-color: #fff;
color: #c95a6c;
}
/* ----- For colors ----- */
.main-nav-color:focus {
color: #c95a6c !important;
background-color: #fff !important; /* #484066 */
}
/* ----- NESTED NAV ----- */
.drop-down-main {
position: absolute;
z-index: 9990;
background-color: #fff;
display: none;
margin-top: 5px;
border: 1px solid #484066;
border-top: none;
}
.show {
display: block;
}
.drop-down-main li {
display: block;
text-align: left;
border-bottom: 1px solid #484066;
width: 100%;
}
.drop-down-main li a:link,
.drop-down-main li a:visited {
display: block;
text-decoration: none;
color: #c95a6c;
font-weight: 400;
font-size: 80%;
background: none; /* #484066 */
border-radius: 0;
padding: 5px 24px 5px 5px;
}
.drop-down-main li:hover,
.drop-down-main li:active {
background-color: #c95a6c;
}
.drop-down-main li a:hover,
.drop-down-main li a:active {
color: #fff;
}
.drop-down-main li:first-child {
margin-top: 10px;
border-top: 1px solid #484066;
}
.drop-down-main li:last-child {
border: none;
}
Javascript
var menuToggle = (function() {
var DOMstrings = {
displayToggle: 'show',
dropParent: '.sub-menu--parent',
dropChild: '.sub-menu--child',
colorToggle: 'main-nav-color',
};
var parentClass = document.querySelector(DOMstrings.dropParent);
var childClass = document.querySelector(DOMstrings.dropChild);
parentClass.addEventListener('click', toggleDropdown, false);
function toggleDropdown() {
childClass.classList.toggle(DOMstrings.displayToggle);
parentClass.classList.toggle(DOMstrings.colorToggle);
};
window.addEventListener('click', function(event) {
if(event.target !== parentClass && event.target.parentNode !== parentClass) {
childClass.classList.remove(DOMstrings.displayToggle);
parentClass.classList.remove(DOMstrings.colorToggle);
}
});
})();
I have also tried using querySelectorAll but it seems you can't use classList Methods with it.

You should use querySelectorAll
Based from this answer: Add event listener to DOM elements based on class
document.querySelector('.class-name'); Will only select the first element having class='class-name'.
For adding event listener to all such elements, use querySelectorAll()
And then update the code where you attach the listener.
var parentClasses = document.querySelectorAll(DOMstrings.dropParent);
for (var i = 0; i < parentClasses.length; i++) {
parentClasses[i].addEventListener('click', setupEventListener(parentClasses[i]), false);
}
function setupEventListener(element){
return function(){
toggleDropdown(element);
}
}
function toggleDropdown(element) {
// since `ul` is a sibling of `a`
element.nextElementSibling.classList.toggle(DOMstrings.displayToggle);
element.classList.toggle(DOMstrings.colorToggle);
};
I believe this should work for your current implementation, however this doesn't include code for toggling the display off.

creating menu header on a particular background color causing alignment to go wrong

I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?

So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.

How to create a vertical navigation with hover dropdowns that also appear vertical?

I've reached a bit of a problem that I'm not sure how to work-around. I'm creating a vertical navigation for a website I'm working on, however all the vertical navigation menu's that I've seen display the hover drop-down menu to the right or left of the navigation. I'd like to have the drop-down menu appear under the link rather than to the side of the link.
For example: In my menu when a user hovers over or visits the "Treatments" I'd like the list "allergies & sinus, head & neck, etc" to appear below it rather than to the right.
I've tried to look around to see how I could go about doing this but haven't found any really good examples or help. I might need some javascript? I'm not sure, but if it's necessary I can add it I'm just not that familiar with javascript as I am with HTML and CSS.
My HTML:
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li><a herf="http://www.accentmd.com/florida-ent/allergy-sinus.html">Allergy & Sinus</a></li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul></li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>
My CSS:
.sidebar-nav {
height:auto;
list-style:none;
width: 100%;
}
.sidebar-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear:both;
width: 50%;
}
.sidebar-nav li a {
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:13px;
text-decoration:none;
}
.sidebar-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover ul {
display: block;
}
.sidebar-nav li:hover .sidebar-sub-menu {
position: relative;
margin-top: -27.5px;
}
.sidebar-sub-menu li {
position: relative;
display: block;
top: 0;
left:90%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
.sidebar-sub-menu li a {
display: inline-block;
padding: 0 10px;
}
.sidebar-nav li:active .sidebar-sub-menu {
position: relative;
margin-top:-27.5px;
}
Thanks in advance.

I reworked your CSS a bit to best isolate the desired behavior, maybe from here on you can keep tweaking the rest to your benefit. Note you've also had a typo on the allergy & sinus <a href=""> (says <a herf="">)
.sidebar-nav {
height: auto;
list-style: none;
width: 100%;
}
.sidebar-nav li {
/* height: 25px; */
margin: 0;
padding: 5px 0;
border: none;
text-align: left;
display: inline-block;
float: left;
clear: both;
width: 50%;
}
.sidebar-nav li a {
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: 13px;
text-decoration: none;
}
/* added CSS */
.sidebar-nav li {
list-style-type: none;
}
.sidebar-nav ul li a:hover {
background: lightgray;
}
.sidebar-nav ul {
display: none;
margin-top: 10px;
padding: 0;
}
.sidebar-nav li:hover>ul {
display: block;
margin: 0;
padding: 0 10px;
}
<h4>ENT Services</h4>
<ul class="sidebar-nav">
<li>Treatments at Accent EMT
<ul class="sidebar-sub-menu">
<li>Allergy & Sinus</li>
<li>Hearing & Balance</li>
<li>Dizziness & Imbalance Disorders</li>
<li>Parathyroid Disorders</li>
</ul>
</li>
<li>General & Pediatric ENT
<li>Facial Plastic & Reconstructive Surgery</li>
</ul>

You could try something like this;
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
a:hover + div {
display: block;
}
</style>
</head>
<body>
<a>Hover me timberrrs!!</a>
<div>here is your stuff</div>
</body>
</html>

Dropdown Menu not working on Index.html after adding java script

I am Creating my personal website but I can not get the drop down to work on desktop then when it is on a mobile devise hide nav and click(using js) to show nav. But its not working only on the Index.html
<div class="content">
<div class="header">
<div class="logo">GM
</div>
<span class="menu-trigger">Menu</span>
<nav class="nav clearfix">
<ul class="clearfix">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li>Portfolio <i class="fa fa-angle-down fa-1"></i>
<ul class="sub-nav">
<li>Music
</li>
<li>Code
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- end of Nav -->
</div>
</div>
CSS:
/**Header**/
.nav {
height: 61px;
background: #381120;
}
.logo a{
float: left;
text-decoration: none;
color: #7e7e7e;
font-size: 43px;
padding-top: 11px;
padding-left: 30px;
}
.nav ul {
margin: 0;
padding: 0;
float: right;
}
.nav ul li {
list-style: none;
float: left;
display: block;
padding: 19px;
}
.nav ul li a {
color: #7e7e7e;
text-decoration: none;
font-size: 25px;
}
.nav ul ul.sub-nav {
display: none;
background: #381120;
width: auto;
position: absolute;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
float: none;
padding-left: 24px;
}
.nav ul li a.active {
color: #08a1c7;
}
.nav ul li a:hover {
color: #efefef;
}
and:
.menu-trigger{
padding-top: 16px;
padding-right: 30px;
font-size: 25px;
text-align: center;
display: none;
float: right;
color: #7e7e7e
}
.menu-trigger p{
color: #7e7e7e
}
/**480px**/
#media only screen and (max-width : 480px) {
.menu-trigger{
display: block;
}
.nav, .mobile-nav{
display: none;
}
.nav-expanded{
display: block;
}
.nav ul li{
float: none;
border-bottom: 1px solid #7e7e7e;
}
.nav ul li:last-child{
border-bottom: none;
}
}
Here is the JS sorry I forgot to put it on here:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});

You really should be able to animate all of this with just CSS. You don't even need jQuery for this, other than for the click action maybe.
Also, and this may not be the case, but in past I have had to write my click handlers like this to bypass some odd bugs. SlideToggle in jQuery can cause some glitchy effects and its not really a great way to do animated menu's. Try to avoid slideToggle().
$("[your-selector]").on("click",function(){
/// do something...
});

I have created a jsfiddle with your code and its seems to work fine. Its rather unclear from what you ask, But what I guess is that your dropdown doesnt work on mobile screen. A problem could be importing jquery in your HTML file. That might solve your problem
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});

Nevermind I fix it I added a
<div class="content">///content goes here</div>
twice causing it to break Thank You for all your help still.

how to make the menu sticked and don't be moved when changing the browser or the zoom

Q:
I have a navigation menu ,i notice that every time i change the browser zoom. its position changed.how to make the menu fixed in its place.
the .css:
ul#topnav
{
margin-left:0;
margin-bottom:50px;
margin-top:5px;
padding: 0;
float: right;
width: 800px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background:#CC6A11; /*url(topnav_stretch.gif) repeat-x;*/
}
ul#topnav li
{
float: right;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a
{
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover
{
background: #1376c9 url(../images/topnav_active.gif) repeat-x;
}
ul#topnav li span
{
float: right;
padding: 10px 0;
position: absolute;
left: 0;
top: 35px;
display: none; /*--Hide by default--*/
width: 800px;
background: #1376c9;
color: #fff; /*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span
{
display: block;
}
/*--Show subnav on hover--*/
ul#topnav li span a
{
display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
text-decoration: underline;
}
.aspx
<div style=" margin-right:20%" >
<ul id="topnav">
<li>الرئيسية</li>
<li>النشاط التعليمي <span>العبأ التدريسي
| الأنشطة التعليمية | <a href="frm_EducationalActivitiesDirectly.aspx">
الأنشطة التعليمية المباشرة</a> </span></li>
<li>النشاط العلمي <span><a href="frm_ScientificActivity.aspx">النشاط
العلمي 1</a> | النشاط العلمي 2 | <a href="frm_ScientificActivity3.aspx">
النشاط العلمي 3</a> </span></li>
<li>النشاط الاداري</li>
<li>االاشتراك في أنشطة طلابية</li>
<li>التقييم العام</li>
<li>خروج</li>
</ul>
</div>
I use this menu

You just have to do two things, and it will solve your question !
1) Remove margin right from div.
Previous :<div style=" margin-right:20%" >
Modified: <div>
2) Update your topnav css as below :
ul#topnav {
background: none repeat scroll 0 0 #CC6A11;
float: right;
font-size: 1.2em;
list-style: none outside none;
margin-bottom: 50px;
margin-top: 15px;
padding: 0;
position: relative;
text-align: left;
}
Hope this will solve your problem!!!!!

It is going to zoom but you can make it stick by replacing:
<div style=" margin-right:20%; width:100%" >
with
<div style="position:absolute; top: 0px; left: 20px;" >

Ensuring that you have your meta viewport tag in your HTML files should help, and
setting the 'position' attribute to 'fixed' in your menu's CSS will make it sticky/float.