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

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;
}

Why doesn't this drop down menu work in IE?

I have a drop down menu which I found a tutorial for.
In Firefox and Opera the drop down menu works fine. But in Internet Explorer it doesn't work. The sub menues are misaligned. They aren't placed under their parent item but a bit more to the right.
Why doesn't it work in IE? Is there a mistake in the JavaScript code which should make it work in IE?
My users say it doesn't work in IE 7.0.6002.18005 and IE 8.0.6.
The quirks mode is only used if the doctype is missing I think. And I have the doctype in my document (without the space at position 2):
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML:
<ul id="nav">
<li class="menuentry">Main item 1
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3</li>
</ul>
</li>
<li class="menuentry">Main item 2
<ul>
<li>Sub item 1</li>
<li>Sub item 2</li>
<li>Sub item 3</li>
</ul>
</li>
</ul>
CSS:
ul#nav li ul {
position: absolute;
left: -9999px;
top: 100%;
display: block;
width: 100px;
background-color: transparent;
}
ul#nav li {
position: relative;
float: left;
}
/* LINKS IN DROP DOWN LISTS START */
ul#nav li ul li a, ul#nav li#current ul li a {
clear: left;
display: block;
text-decoration: none;
width: 100px;
background-color: #333;
color: #fff;
}
ul#nav li ul li a:hover, ul#nav li#current ul li a:hover {
text-decoration: none;
background-color: #ececec;
color: #333;
}
/* LINKS IN DROP DOWN LISTS END */
/* CHANGE BETWEEN VISIBLE AND INVISIBLE START */
ul#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* CHANGE BETWEEN VISIBLE AND INVISIBLE END */
JavaScript:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
addEvent(sfEls[i], "mouseover", function() {
this.className+=" sfhover";
});
addEvent(sfEls[i], "mouseout", function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
});
}
}
function addEvent(el, name, func) {
if (el.attachEvent)
el.attachEvent("on" + name, func);
else
el.addEventListener(name, func, false);
}
addEvent(window, "load", sfHover);

IE7 has problems with auto margins. Just change the hover margin from left: auto to left: 0px and it should work.

How about adding setting the padding/margin on the ul and li items like this:
ul#nav li ul {
position: absolute;
left: -9999px;
top: 100%;
display: block;
width: 100px;
background-color: transparent;
padding-left:0px;
margin-left:0px;
}
ul#nav li {
position: relative;
float: left;
list-style-type: none;
padding-left:0px;
margin-left:0px;
}
/* LINKS IN DROP DOWN LISTS START */
ul#nav li ul li a, ul#nav li#current ul li a {
clear: left;
display: block;
text-decoration: none;
width: 100px;
background-color: #333;
color: #fff;
}
ul#nav li ul li a:hover, ul#nav li#current ul li a:hover {
text-decoration: none;
background-color: #ececec;
color: #333;
}
/* LINKS IN DROP DOWN LISTS END */
/* CHANGE BETWEEN VISIBLE AND INVISIBLE START */
ul#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* CHANGE BETWEEN VISIBLE AND INVISIBLE END */