Develop Reference

Dropdown menu continues to stay after browser expanded

I have a responsive menu and I have some problems with it
if you run this code in your laptop in full screen format then change browser width below the breakpoint at 943px, menu changes to mobile format and in this case if you select for example "about option " it's dropdown appears. Howevere if you resize the screen back to full size without first closing "about" drop down, it did not disappear in full screen, it continues to stay even after the browser is fully expanded. and it looks messed up
any idea? thanks
/*global $ */
$(document).ready(function () {
"use strict";
$('.menu > ul > li:has( > ul)').addClass('');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("");
$(".menu > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
$(".menu-mobile").click(function (e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
});
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
font-family: 'Source Sans Pro', sans-serif;
}
* {
box-sizing: border-box;
}
a {
color: #333;
}
.description {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-container {
width: 80%;
margin: 0 auto;
background: #e9e9e9;
}
.menu-mobile {
display: none;
padding: 20px;
}
.menu-mobile:after {
content: "\f394";
font-family: "Ionicons";
font-size: 2.5rem;
padding: 0;
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%);
}
.menu-dropdown-icon:before {
content: "\f489";
font-family: "Ionicons";
display: none;
cursor: pointer;
float: right;
padding: 1.5em 2em;
background: #fff;
color: #333;
}
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
box-sizing: border-box;
}
.menu > ul:before,
.menu > ul:after {
content: "";
display: table;
}
.menu > ul:after {
clear: both;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
padding: 0;
margin: 0;
}
.menu > ul > li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;
}
.menu > ul > li:hover {
background: #f0f0f0;
}
.menu > ul > li > ul {
display: none;
width: 100%;
background: #f0f0f0;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
content: "";
display: table;
}
.menu > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
}
.menu > ul > li > ul > li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}
.menu > ul > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
content: "";
display: table;
}
.menu > ul > li > ul > li > ul:after {
clear: both;
}
.menu > ul > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;
}
.menu > ul > li > ul > li > ul > li a {
border: 0;
}
.menu > ul > li > ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
}
.menu > ul > li > ul.normal-sub > li {
width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 959px) {
.menu-container {
width: 100%;
}
.menu-mobile {
display: block;
}
.menu-dropdown-icon:before {
display: block;
}
.menu > ul {
display: none;
}
.menu > ul > li {
width: 100%;
float: none;
display: block;
}
.menu > ul > li a {
padding: 1.5em;
width: 100%;
display: block;
}
.menu > ul > li > ul {
position: relative;
}
.menu > ul > li > ul.normal-sub {
width: 100%;
}
.menu > ul > li > ul > li {
float: none;
width: 100%;
margin-top: 20px;
}
.menu > ul > li > ul > li:first-child {
margin: 0;
}
.menu > ul > li > ul > li > ul {
position: relative;
}
.menu > ul > li > ul > li > ul > li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>megamenu.js | Last responsive megamenu you'll ever need</title>
<meta name="description" content="">
<meta name="keywords" content="" />
<meta name="author" content="Mario Loncarek">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
window.Modernizr || document.write('<script src="js/vendor/modernizr-2.8.3.min.js"><\/script>')
</script>
</head>
<body>
<div class="menu-container">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Research
<ul>
<li>Undergraduate research</li>
<li>Masters research</li>
<li>Funding</li>
</ul>
</li>
<li>Something
<ul>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
</ul>
</li>
</ul>
</li>
<li>News
<ul>
<li>Today</li>
<li>Calendar</li>
<li>Sport</li>
</ul>
</li>
<li>Contact
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Empty sub</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="description">
<h3>megamenu.js - Last responsive megamenu you'll ever need</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<script src="js/megamenu.js"></script>
</body>
</html>

If I understand what your problem is correctly, one way of doing what you want is by refreshing the webpage on resize.
Here is some JavaScript to do it:
window.addEventListener('resize', function(event) {
clearTimeout(resizeTimeout);
var resizeTimeout = setTimeout(function(){
window.location.reload();
}, 300);
});
UPDATE:
Since it's just a menu, it would not be ideal to refresh the whole page so another way is to reduce its z-index, read more about the z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Example:
Javascript:
var currentWidth ;
setInterval(function(){
currentWidth = window.innerWidth;
if(currentWidth < 983) { //983 or whatever threshold you want
document.getElementsByClassName(".menu-container").style.zIndex = -999; //set the value to -999 just to be sure :)
}
else{
document.getElementsByClassName(".menu-container").style.zIndex = 999;
}
}, 300);

The problem is that you can "open" multiple sub-menus in mobile mode via this code:
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
What you could do is add code that listens on the windows resize event and then fades the open menus. I did this with the following code. It remembers which sub-menu was opened and then on resize closes them:
var openSubMenu = undefined; // You want to store the open sub-menu here
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("Navigation");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu > ul > li").click(function () {
if ($(window).width() <= 943) {
var thisItem = $(this).children("ul");
if (openSubMenu && openSubMenu.get(0) != thisItem.get(0)) openSubMenu.fadeOut(0);
openSubMenu = thisItem;
openSubMenu.fadeToggle(150);
//$(this).children("ul").fadeToggle(150);
}
});
//When clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
$(".menu-mobile").click(function (e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
// When the window resizes clear any open windows
$(window).resize(() => {
if (openSubMenu && openSubMenu.css('display') === 'block') {
openSubMenu.fadeOut(0);
openSubMenu = undefined;
}
})
};

Why are the anchors in my submenu returning false?

I am writing a jquery dropdown script for my navigation submenus. I have return false on the top level anchors but the problem is that this is also applying to the anchors in the submenus. My script also adds chevrons to the top level links that have submenus but those are also being added to the submenu links. What am I doing wrong? Here is a jsFiddle. Thanks for your time.
<div class="nav-outter">
<nav>
<ul>
<li>Home</li>
<li class="has-submenu">Services
<ul>
<li>Web Development</li>
<li>Photography</li>
<li>Multimedia</li>
</ul>
</li>
</ul>
</nav>
</div>
$(document).ready(function() {
$('nav > ul > li.has-submenu').each(function() {
$(this).find('a:first-child').each(function() {
$(this).append('<i class="fa fa-chevron-down"></i>');
$(this).on('click', function(e) {
e.preventDefault();
$(this).parent().find('ul').each(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.slideUp(300);
} else {
$(this).addClass('active')
.slideDown(300);
}
});
});
});
});
});
.nav-outter {
position: relative;
z-index: 1;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
padding: 3px 15px;
font-size: 1.2em;
color: #2c3e50;
text-decoration: none;
}
nav > ul > li > ul {
display: none;
position: absolute;
z-index: 5;
list-style: none;
border: 1px solid #FC4349;
border-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
margin-top: 3%;
}
nav > ul > li > ul > li {
border-bottom: 1px solid #FC4349;
}
nav > ul > li > ul > li > a {
display: block;
padding: 15px 25px 15px 10px;
text-align: left;
background: #fff;
color: #FC4349;
text-decoration: none;
}

The find('a:first-child') is going to include every first child which is all of the links since each one is a first-child
A simpler approach would be just target the children of has-submenu and remove one each
$('nav > ul > li.has-submenu').children('a').each(function() {
$(this).append('<i class="fa fa-chevron-down"></i>');
$(this).on('click', function(e) {
.....
Or using your code if you had used find('a:first') it would have worked since you would be targeting only the first <a> in each of those class

Jquery slideUp doesn't work at first click

I've created myself a accordion menu, but I've got a problem. When I click for the first time on 'li' element slideUp doesn't work.
$(document).ready(function() {
$('#menu ul li a').click(function(e) {
e.preventDefault();
if ($(this).parent().hasClass('active')) {
if ($(this).next().is(':visible')) {
$(this).next().slideUp();
$(this).parent().removeClass('active');
} else {
$(this).next().slideDown();
}
} else {
$('#menu ul li').each(function() {
$(this).removeClass('active');
});
$('#menu ul li ul').slideUp();
$(this).next().slideDown();
$(this).parent().addClass('active');
}
});
});
#menu,
#menu ul,
#menu li,
#menu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#menu a {
line-height: 1.3;
}
#menu > ul > li {
margin: 0;
}
#menu > ul > li:last-child {
margin: 0;
}
#menu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
padding: 5px;
}
#menu > ul > li > a > span {
display: block;
padding: 6px 10px;
font-weight: bold;
}
#menu > ul > li > a:hover {
text-decoration: none;
background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
}
#menu > ul > li.active {
border-bottom: none;
}
#menu > ul > li.active > a {
background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#menu ul ul {
padding: 5px 12px;
display: none;
background: #333333;
}
#menu ul ul li {
padding: 3px 0;
}
#menu ul ul a {
display: block;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 10px 0;
}
#menu ul ul a:hover {
color: #0074a2;
}
#menu ul li.active ul {
display: block;
}
#menu ul li img {
float: left;
margin: -2px 4px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li class='has-sub active'><a href='#'><span>AAA</span></a>
<ul>
<li><a href='#'><span>AAA_1</span></a></li>
<li><a href='#'><span>AAA_2</span></a></li>
<li><a href='#'><span>AAA_3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>BBB</span></a>
<ul>
<li><a href='#'><span>BBB_1</span></a></li>
<li><a href='#'><span>BBB_2</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>CCC</span></a>
<ul>
<li><a href='#'><span>CCC_1</span></a></li>
<li><a href='#'><span>CCC_2</span></a></li>
<li><a href='#'><span>CCC_3</span></a></li>
<li><a href='#'><span>CCC_4</span></a></li>
</ul>
</li>
</ul>
</div>
Here is my simple code typed in jsfiddle.
jsfiddle
Could anyone tell me where is an error and how to solve it ?
Thanks !

The state of the html goes like this:
1. From start: <ul>
2. After you click once: <ul style="display: none;">
3. After you click it again: <ul style="display: block;">
Now I'm not that great when it comes to css, but if you keep track of the dynamic css which goes on when you press it, then you'll know what attributes you are missing on your styling.

The problem is active class has been removed before finishing slideUp animation. Use setTimeout function like following.
setTimeout(function(){
$(this).parent().removeClass('active')
}, 0);
You can increase time if you need.
Update:
I think your selector should be.
$('#menu > ul > li > a')
instead of
$('#menu ul li a')

how to display sub menus when hover

I have a vertical menu like this :
<ul>
<li>Level 1 menu
<ul>
<li>Level 2 item</li>
<li>Level 2 item</li>
</ul>
</li>
<li>Level 1 menu
<ul>
<li>Level 2 item</li>
<li>Level 2 item</li>
</ul>
</li>
<li>Level 1 menu</li>
</ul>
Now i need to display the Level 2 items once i hover so i added this line
#bar ul li:hover ul { display: block; }
in css but it didn't make any difference, and i have no other display tag in my css
#bar ul { list-style: none; margin: 0px; padding: 0px; }
#bar ul li { padding: 4px 0px 4px 0px; }
#bar ul li a { color: #FFF; font-size: 16px; }
#bar ul li a:hover { font-weight:bold }
#bar ul li ul li { padding: 4px 0px 4px 0px; margin-left:10px;}
#bar ul li ul li a { padding-left: 0px; font-size: 10px; }

As I understand right, you need to add #bar ul li ul { display: none; }
Here is example

#bar ul li ul { display: none;}
#bar ul li:hover ul { display: block; }
and also wrap your lists in element with id #bar
here is the demo

You should try using child selectors > (which are faster) with descendant ones wisely used. But a 5 level descendant selector is overkill.
Basically, first use a single descendant selector to affect all of them, and then a child one to override and set styles for the first level.
Something like this:
#menu { list-style: none; margin: 0px; padding: 0px; }
#menu li { padding: 4px 0px 4px 0px; margin-left:10px; }
#menu > li { padding: 4px 0px 4px 0px; margin-left:0; }
#menu a { color: #FFF; padding-left: 0px; font-size: 10px; }
#menu > li > a { font-size: 16px; }
#menu a:hover { font-weight:bold }
#menu ul { display: none; }
#menu li:hover > ul { display: block; }
Demo

I would like a menu submenu using javascript or any other way possible

I've searched and tried multiple way to accomplish this to no avail...
i have provided my current code below....please feel free to critique and provide with any help necessary...
<script src="jquery.js"></script>
<div id="navigation">
<p>Leave A Note</p>
<ul id="menu">
<li>Artist<ul>
<li>Sketchbook</li><li>Music</li><li>Artwork</li><li>
Media</li><li>Words</li></ul>
</li>
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('Open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropogation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if ($this.hasClass('page') ) parent.location = $this.attr('href');
if ($this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
here
the javascript is not doing as what i expect it to..as the unordered lists are still showing as a list and are not hidden....any advice would be greatly appreciated!..

You're missing a closing li at this line:
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
This should be
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</li></ul></li></div>
Maybe this is causing the javascript issue.

Drop Down menus can be done by Pure CSS with relative and absolute elements.
Consider the following HTML:
<ul>
<li>Level 1</li>
<li>
Level 2
<ul>
<li>Level 2-1</li>
<li>Level 2-2</li>
<li>Level 2-3</li>
<li>Level 2-4</li>
<li>Level 2-5</li>
</ul>
</li>
<li>Level 3</li>
<li>Level 4</li>
<li>Level 5</li>
</ul>
Horizontal
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: 20px;
left: -1px;
display: none;
}
ul ul li + li {
margin-left: 0;
margin-top: -1px;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid blue;
width: 150px;
float: left;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-left: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}
Vertical
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: -1px;
left: 150px;
display: none;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid #4169e1;
width: 150px;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-top: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}