CSS Menu disappear - javascript

I created a menu in html/css but where I wanted the subitems to be shown on parent item hover. The problem is when I hover on it in IE it only shows it's subitems when I hover on the text in the menu item, If I hover over the element and not the text the subitems disappear again. So if I hover and want to move my mouse to my submenu the submenu disappears unless I'm fast enough. This is very annoying, does anyone know how I can solve this?
MY menu code is like so:
<ul id="leftnav">
<li><a>Item1</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
<li><a>Item2</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</ul>
The menu should be a left sided menu which shows it's subitems only on hover, so I used css to achieve this with the following code:
#leftnav, #leftnav ul
{
padding: 0;
margin: 0;
}
#leftnav ul li
{
margin-left: 102px;
position: relative;
top: -19px; /*sets the childitems on the same height as the parent item*/
}
#leftnav li
{
float: left;
width: 100px;
}
#leftnav ul
{
position: absolute;
width: 100px;
left: -1000px; /*makes it disappear*/
}
#leftnav li:hover ul, #leftnav li.ie_does_hover ul
{
left: auto;
}
#leftnav a
{
display: block;
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}
Since this only works with firefox I also had to insert a javascript to get this to work in IE using code:
<script language="JavaScript">
sfHover = function()
{
var sfElsE = document.getElementById("leftnav").getElementsByTagName("LI");
for (var i=0; i<sfElsE.length; i++)
{
sfElsE[i].onmouseover=function()
{
this.className+=" ie_does_hover";
}
sfElsE[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Many many many thanks for replies

In your CSS you have:
#leftnav li:hover ul
Which would mean the rule is applied to ul elements that are children of li elements when that parent li is hovered.
But in your HTML, you have:
<li><a>Item2</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
</ul>
So the sub item ul is not a child of the item ul, so that rule never comes true. You need to make the sub-items nested to the items. Like this:
<ul id="leftnav">
<li><a>Item1</a>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</li>
<li><a>Item2</a>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</li>
</ul>
Notice how I don't close the list item until after the sub-list.

Reinventing the wheel: http://www.htmldog.com/articles/suckerfish/ teaches you about it. They even have a great example.

Related

Open child div on hover parent and close other child divs ( w/ Javascript)

When I open a child div on hover with Javascript it works, also when I hover over the next parent div that child div opens but when I go back to the first parent the second one stays open (on top) and doesn't fade-out.
What I would like is that the other child div('s) close when hovering to a new one. Maybe good to know is that I only want the other child div(s) to close when hovering to a new parent with a child div not when im just hovering out of the current parent.
Does anyone know the trick?
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
I found the solution when 'parent()' and 'children()' are not 'this'.
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
Sorry have just re-read your question and realised you wanted the menu to stay active. I've created a demonstration which does this by adding an .active class and toggling the submenus are you initially wanted using fadeIn and fadeOut. This will also allow you to attribute css styles to the dropdown if you would rather use that rather than jquery.
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
The second example I will leave up for others, it shows how to do a more traditional dropdown where it fades out once the hover leaves the parent. You can use the exit function as well as the entry function of hover, the first function you provide is ran on mouseenter and the second on mouseleave.
Jquery .hover()
EXAMPLE WITH PERSISTENT DROPDOWNS
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
EXAMPLE WITH TRADITIONAL DROPDOWNS
These collapse when the hovering over the parent ends.
// Hover function
$('li.menu-item-has-children').hover(
// Hover in function
function() {
$('ul.dropdown-menu-main', this).fadeIn('slow');
},
// Hover exit function
function() {
$('ul.dropdown-menu-main', this).fadeOut('slow');
}
);
ul,
ul li {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px !important;
}
ul.dropdown-menu-main {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background: black;
z-index: -1;
padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>

Hiding and displaying content with jQuery

I'm trying to change the content on a page depending on which link is clicked. My problem is that once the content for a link is displayed it wont disappear if another link is clicked even if I have set it to display none when the other link is clicked. The display: block is overwriting the display: none.
For those of you suggesting I use .show() and .hide() I appreciate your help but I don't think this method will be best for me as I need to add a class to the elements so I can animate it later. Thanks
jQuery(document).ready(function() {
jQuery('#link_one').click(function() {
jQuery('#about_us').addClass('hide');
jQuery('#why_us').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#accreditations').addClass('show');
});
jQuery('#link_two').click(function() {
jQuery('#why_us').addClass('hide');
jQuery('#accreditations').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#about_us').addClass('show');
});
jQuery('#link_three').click(function() {
jQuery('#about_us').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#accreditations').addClass('hide');
jQuery('#why_us').addClass('show');
});
});
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods">
<p>Our products - Link 2</p>
</div>
<div id="why_us">
<p>Why us content - link 3</p>
</div>
https://codepen.io/Reece_Dev/pen/gWdEoJ
what I'd do and recommend doing:
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="pageContainer" id="uniqueID">
<!-- content -->
</div>
jQuery
$(document).ready(function()
{
$('.link').on('click', function()
{
$('.pageContainer').addClass('hide');
$('#'+ $(this).data('target')).removeClass('hide');
});
});
what this will do is, when anything with class .link is clicked, add a class ('hide') to all elements that have the class .pageContainer. Then it will remove the class from the div with the id that matches the target (a console.log of the $('#'+ $(this).data('target')) should result in $('#why_us') - if the why_us link was clicked
data is an attribute you can attach to elements, data-* - * can be anything you want, but makes more sense to call it something related. calling .data() will get an array of all available data tags on the element, doing .data('string') will get the data element that matches data-string.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*
With your actual code you are not toggling the hide and show classes correctly.
You can just use jQuery .hide() and .show() methods, instead of adding and removing classes:
$(document).ready(function() {
$('#link_one').click(function() {
$('#about_us').hide();
$('#why_us').hide();
$('#our_prods').hide();
$('#accreditations').show();
});
$('#link_two').click(function() {
$('#why_us').hide();
$('#accreditations').hide();
$('#our_prods').hide();
$('#about_us').show();
});
$('#link_three').click(function() {
$('#about_us').hide();
$('#our_prods').hide();
$('#accreditations').hide();
$('#why_us').show();
});
});
Demo:
$(document).ready(function() {
$('#link_one').click(function() {
$('#about_us').hide();
$('#why_us').hide();
$('#our_prods').hide();
$('#accreditations').show();
});
$('#link_two').click(function() {
$('#why_us').hide();
$('#accreditations').hide();
$('#our_prods').hide();
$('#about_us').show();
});
$('#link_three').click(function() {
$('#about_us').hide();
$('#our_prods').hide();
$('#accreditations').hide();
$('#why_us').show();
});
});
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods">
<p>Our products - Link 2</p>
</div>
<div id="why_us">
<p>Why us content - link 3</p>
</div>
use jquery show hide function instead of addClass. as when you add hide class to already added show element, display block will override display none. instead use this.
jQuery('#link_one').click(function() {
jQuery('#about_us').hide();
jQuery('#why_us').hide();
jQuery('#our_prods').hide();
jQuery('#accreditations').show();
});
jQuery('#link_two').click(function() {
jQuery('#why_us').hide();
jQuery('#accreditations').hide();
jQuery('#our_prods').hide();
jQuery('#about_us').show();
});
jQuery('#link_three').click(function() {
jQuery('#about_us').hide();
jQuery('#our_prods').hide();
jQuery('#accreditations').hide();
jQuery('#why_us').show();
});
Your problem is that you're never removing the class, so once you click a link it has both the hide and show classes. And because the show class is later in your css, it overrides the hide class.
You can add .removeClass('show') at the end of your changes. Like
jQuery('#our_prods').addClass('hide').removeClass('show');
An easier method might be to use the show() and hide() jQuery methods, and not worry about swapping the classes.
jQuery('#link_two').click(function() {
jQuery('#why_us').hide();
jQuery('#accreditations').hide();
jQuery('#our_prods').hide();
jQuery('#about_us').show();
});
The issue is that you're now removing the class show when you're trying to hide the content.
Also, the better way to that is by using the jquery hide and show functions.
The script changes to this :
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#link_one').click(function() {
jQuery('.content').hide()
jQuery('#accreditations').show()
});
jQuery('#link_two').click(function() {
jQuery('.content').hide()
jQuery('#our_prods').show()
});
jQuery('#link_three').click(function() {
jQuery('.content').hide()
jQuery('#why_us').show()
});
});
</script>
And we added a class content to the page containers.
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us" class="content show">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations" class="content">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods" class="content">
<p>Our products - Link 2</p>
</div>
<div id="why_us" class="content">
<p>Why us content - link 3</p>
</div>
The updated Css :
<style type="text/css">
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
.content{
display: none;
}
.show{
display: block;
}
</style>

Simulating Touch on a Windows Surface without the use of aria-haspop

Microsoft suggests using aria-haspop="true" to simulate hover on touch-enabled devices.
This is also the correct use in the W3 roles model spec.
Without including aria-haspop="true" I am unable to keep a submenu open when I click, and when I hold down a click it will fire a "right-click".
Codepen Example
HTML
<ul class="menu">
<li aria-haspopup="false">
aria-haspopup="false"
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>
Menu Item 2
</li>
<li aria-haspopup="true">
aria-haspop="true"
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
CSS
.menu > li {
display: inline-block;
position: relative;
background: #1abc9c;
}
.menu > li > a {
padding: 20px;
background: #1abc9c;
display: inline;
float: left;
}
.menu > li:hover .sub-menu {
display: block;
position: absolute;
background: #1abc9c;
top: 50px;
left: 0;
}
.menu .sub-menu {
display: none;
}
.menu .sub-menu li {
padding: 20px;
width: 140px;
}
Let's try to make the web a less accessible place. Is there any way to have the sub-menu work just as well without adding aria tags on a windows surface device? Preferably using only CSS. Javascript would be acceptable but less than ideal.
In the same Microsoft guide you linked, they recommend using the onclick event to show content.
The best practice is to not use hover to hide content that a user can interact with. Instead, consider using the onclick event to toggle the visibility.
The challenge, of course, is that your menu items are also links, and clicking on a link is likely to take you to another page. Only if they really are dead anchors that go nowhere (as in your example code) is it safe to use their onclick events to show or hide the submenus.
Here's some example code that uses onclick to show the submenus instead of using CSS :hover. Note that my example directly assigns the handlers for the sake of brevity, but better practice would be to use the addEventListener() method.
var parentMenuItems = document.querySelectorAll(".menu > li");
var len = parentMenuItems.length;
while (len--) {
parentMenuItems[len].onclick = showSubMenu;
parentMenuItems[len].onmouseenter = showSubMenu;
parentMenuItems[len].onmouseleave = hideSubMenu;
}
function showSubMenu() {
this.querySelector(".sub-menu").style.display = "block";
}
function hideSubMenu() {
this.querySelector(".sub-menu").style.display = "none";
}
.menu > li {
display: inline-block;
position: relative;
background: #1abc9c;
}
.menu > li > a {
padding: 20px;
background: #1abc9c;
display: inline;
float: left;
}
.menu > li .sub-menu {
position: absolute;
background: #1abc9c;
top: 50px;
left: 0;
}
.menu .sub-menu {
display: none;
}
.menu .sub-menu li {
padding: 20px;
width: 140px;
}
<ul class="menu">
<li aria-haspopup="false">
aria-haspopup="false"
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li aria-haspopup="true">
aria-haspop="true"
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>

Can you set css min-width relative to another element?

I have a nav menu of links and sub menu. I want the submenu min width to be that of the link. Is this possible in CSS? I'm using LESS if that helps at all.
<ul>
<li>
Item FooBarBaz
<ul class="submenu">
<li><a>sub1</a></li>
<li><a>sub2</a></li>
<li><a>sub3</a></li>
</ul>
</li>
<li>
Item FooBarBazZipBamBop
<ul class="submenu">
<li><a>sub1</a></li>
<li><a>sub2</a></li>
<li><a>sub3</a></li>
</ul>
</li>
</ul>
I want each ul.submenu to have the min-width of the previous sibling anchor. Obviously this would be a potentially different value for each submenu. Is this possible in CSS? Or is jquery, javascript a better solution here?
Sure. Here is an example: http://jsfiddle.net/SeKT9/
ul
{
margin:0;
padding:0;
list-style:none;
}
body > ul > li
{
float: left;
position: relative;
}
ul > li a
{
display: block;
margin: 5px;
}
ul > li:hover > ul
{
display: block;
}
ul > li > ul
{
position: absolute;
min-width: 100%;
background-color: green;
display: none;
}
ul > li > ul > li
{
display: block;
}
Maybe just adding an inline-block div around each submenu is quicker/easier? I'm always hesitant to add many lines of code for a small simple effect.
<ul>
<li>
<div style='display:inline-block;'>
Item FooBarBaz
<ul class="submenu">
<li><a>sub1</a></li>
<li><a>sub2</a></li>
<li><a>sub3</a></li>
</ul>
</div>
</li>
<li>
<div style='display:inline-block;'>
Item FooBarBazZipBamBop
<ul class="submenu">
<li><a>sub1</a></li>
<li><a>sub2</a></li>
<li><a>sub3</a></li>
</ul>
</div>
</li>
</ul>

CSS Dynamic Navigation with Hover - How Do I make it work in iOS Safari?

In my site I use a CSS only dynamic menu. This is fine in desktop browsers, but not on iOS (iphone, ipad, etc) because the touch interface does not support the :hover selector.
My question is: what is the best way of supporting this on iOS? (Ideally either by patching with some CSS, or Javascript that will make the existing code work, rather than doing the whole thing over just to support iOS)
My html looks like this
<ul id="nav">
<li>
Item 1
<ul>
<li><a href=''>sub nav 1.1</a></li>
<li><a href=''>sub nav 1.2</a></li>
</ul>
</li>
<li>
Item 2
<ul>
<li><a href=''>sub nav 2.1</a></li>
<li><a href=''>sub nav 2.2</a></li>
</ul>
</li>
<li>
Item 3
<ul>
<li><a href=''>sub nav 3.1</a></li>
<li><a href=''>sub nav 3.2</a></li>
</ul>
</li>
</ul> ​​​​​
And the CSS is this
#nav li {
float:left;
padding:0 15px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: -10px;
}
#nav li:hover ul {
left: auto;
}
I have done a jsfiddle of this here: http://jsfiddle.net/NuTz4/
Check this article, perhaps it's a solution for you ;)
http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/
Also JS solution, taken from: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
var nav = document.getElementById('nav');
var els= nav.getElementsByTagName('li');
for(var i = 0; i < els.length; i++){
els[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
els[i].addEventListener('touchend', function(){this.className = "";}, false);
}
In jQuery:
$('#nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
css:
li:hover, li.hover { /* whatever your hover effect is */ }

Categories