Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.2s;
}
<ul>
<li class="item-has-children">
December
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<li class="item-has-children">
November
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
Where is my mistake?
Thank you
You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.
Instead you can play with the height, the visibility.
Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}
.sub-menu {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity 2.3s, max-height 0.6s ease-in;
-webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}
.sub-menu.selected {
visibility: visible;
opacity: 1;
max-height: 300px;
transition: opacity 2.3s, max-height 1.2s ease-out;
-webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}
<ul>
<li class="item-has-children">
December
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<li class="item-has-children">
November
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
You cannot transition display. However you can change the max-height and achieve a nice animation.
I have made a simple example on how to make it work
$("#myItem").on("click", function(){
if( $('.sub-menu').hasClass('reveal'))
{
$('.sub-menu').removeClass('reveal');
}
else {
$('.sub-menu').addClass('reveal');
$('.sub-menu').addClass('transition');
}
});
.sub-menu {
overflow:hidden;
display:block;
max-height:0;
}
.transition
{
transition:max-height 3.3s ease-out;
}
.reveal
{
max-height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
December
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
Related
Okay so here is a cut down of what I have so far JSFiddle. Hovering over 'Aviation' brings down the menu. I would like it so that when you open the menu the first menu item is already set to active but also need the current hovered selection to stay selected when they move over the the "Related Links" side of the drop down.
I know very little JS but this is what I have come up with so far to make the menu appear.
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$(".aviation-menu").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("#top li").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
});
Any help would massively be appriciated thank you.
I think you can use it like below, I gave the Jsfiddle link at the bottom as well:
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("li").hover(function() {
$("li").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
JSFIDDLE
Basically you will be removing all the "active" classes on the other list items when any of them gets hovered, so it will have one active all the time.
Edit: You can also add this $("li").first().addClass("active"); at the beginning so it will have "Home" as active by default.
You should consider the following: There is no "hovering" on mobile devices and what you're doing with JS (adding a class on hover, but actually what you want is a visual change) can be done with CSS, which is nicer in my opinion.
Here is a great example of a pure CSS dropdown menu by Phil Hoyt: http://codepen.io/philhoyt/pen/ujHzd
HTML:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
We are still using an old version of SharePoint (2007) and I have begun to try and learn how you use CSS and Content Editor WebParts (CEWPs) to adjust the way some of our lists work. I am trying to create a small row of drop downs within a web part that will have hyperlinks to sections. This is the HTML code I am using which displays correctly via Chrome:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
For some reason when I put this into a CEWP and use IE it doesn't use the CSS code at all and displays as HTML, but if I open the same page in Chrome is displays fine.
Can anyone offer any suggestions on how I can get old versions of IE to display this bit of CSS within MOSS 2007 please?
I created a dropdown menu and below is my snippet. The problem is whenever I tried to go to the dropdown part (the one that has a class of dropdown_menu) menu after I click the link that triggered it, it will slideUp which supposedly it will not as it is also inside with the .has_dp element, any ideas? Im wondering if the best solution is to bind the .dropdown_menu element with the mouseleave event of the .has_dp so that the .dropdown_menu will only slideUp if the cursor is not over on the .has_dp and .dropdown_menu, is that possible?
$(document).ready(function(){
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function(){
$(".dropdown_menu", this).slideDown();
}).mouseout(function(){
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
list-style: none;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: blue;
}
/* dropdown */
.dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li{
clear: both;
float: none;
}
.dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
The problem is the nature of mouseout event which is bubbled.
You need to use mouseleave instead of mouseout
$(document).ready(function() {
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function() {
$(".dropdown_menu", this).slideDown();
}).mouseleave(function() {
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li {
float: left;
list-style: none;
}
#topnav li a {
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span {
float: left;
display: block;
}
#topnav li a span:first-child {
margin-right: 3px;
}
#topnav li a span:last-child {
padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
color: blue;
}
/* dropdown */
.dropdown_menu {
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li {
clear: both;
float: none;
}
.dropdown_menu a {
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
I have found this menu and have integrated it into my local (wordpress) site.
Code pen Fork
Everything works as it should as far as the animation, ect.
However, when I add a link into the
I have tried both relative and absolute paths for the link as well. -- See the codepen link "start"-->"Menu 1"-->"Sub menu 1" -- as you hover over you can see I have added the link of http://www.google.com/ for a test, but when clicked it does not go to the site.
I appreciate any pointers - and sorry if it is simple.
Here is the full code: (Also contained on the code pen link)
HTML:
<div class="radmenu"><a href="#" class="show" >START</a>
<ul>
<li>
Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Menu 4
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>
Menu 5
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</div>
CSS:
#import "compass/css3";
$sub-menus : 5;
body {
background: url(http://www.scenicreflections.com/files/Hazy_Forest_Road_Wallpaper_qoek0.jpg)
}
.radmenu {
position: absolute;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
> a {
top: calc(50% - 60px);
left: calc(50% - 60px);
&.show {
display: flex !important;
}
}
li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
transition: all 1s ease;
}
a {
position: absolute;
width: 120px;
height: 120px;
background: rgba(white, 0.9);
text-align: center;
align-items: center;
justify-content: center;
border-radius: 120px;
display: none;
text-decoration: none;
color: #333;
transition: all 1s ease;
box-shadow: 0 0 15px #222;
font-family: "segoe ui";
font-weight: 200;
font-size: 16px;
}
.selected {
background: rgba(#333, 0.9);
display: flex;
top: calc(50% - 60px);
left: calc(50% - 60px);
color: #f1f1f1;
box-shadow: 0 0 10px #f1f1f1;
+ ul {
#for $i from 1 through $sub-menus {
> li:nth-child(#{$i}) {
$angle: 360deg / $sub-menus * $i;
-webkit-transform: rotate($angle) translateX(100px);
transform: rotate($angle) translateX(100px);
> a {
-webkit-transform: rotate(0 - $angle);
transform: rotate(0 - $angle);
}
}
}
> li > a {
display: flex
}
}
}
}
Javascript:
var buttons = document.querySelectorAll(".radmenu a");
for (var i=0, l=buttons.length; i<l; i++) {
var button = buttons[i];
button.onclick = setSelected;
}
function setSelected(e) {
if (this.classList.contains("selected")) {
this.classList.remove("selected");
if (!this.parentNode.classList.contains("radmenu")) {
this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
} else {
this.classList.add("show");
}
} else {
this.classList.add("selected");
if (!this.parentNode.classList.contains("radmenu")) {
this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
} else {
this.classList.remove("show");
}
}
return false;
}
Just modify your javascript code to following,
function setSelected(e) {
if(this.getAttribute("href") == "#"){
if (this.classList.contains("selected")) {
this.classList.remove("selected");
if (!this.parentNode.classList.contains("radmenu")) {
this.parentNode.parentNode.parentNode.querySelector("a").classList.add("selected")
} else {
this.classList.add("show");
}
} else {
this.classList.add("selected");
if (!this.parentNode.classList.contains("radmenu")) {
this.parentNode.parentNode.parentNode.querySelector("a").classList.remove("selected")
} else {
this.classList.remove("show");
}
}
return false;
}
else{
return true;
}
}
Basically the return false; was preventing the page to perform the default action of going to the assigned href.
I have a menu-submenu-subsubmenu construction in HTML like this:
<menu>
<li>Item 1</li>
<li><ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul>
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
...using whit this css formating:
menu {
display: block;
width: 200px;
}
/* hide subitems */
menu li ul,
menu li ul li ul {
display: none;
position: absolute;
}
/* set up positions */
menu li ul {
left: 200px;
width: 200px;
}
menu li ul li ul {
left: 400px;
width: 200px;
}
I use this jQuery code:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
$('menu li a').mouseenter(function() {
$(this).parent().children('ul').show();
}).mouseleave(function() {
$(this).parent().children('ul').hide();
});
});
How can I detect mouse is leaving the element to their child? Or how can I get the child element to stay if it's necessary?
Change your code to be like this:
$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */
// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
var time = new Date().getTime();
$(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
var leaveTime = new Date().getTime();
var $this = $(this);
window.setTimeout(function () {
var $ul = $this.parent().find('ul');
var beginTime = $ul.data('showing-time') || 0;
if (leaveTime > beginTime) {
$this.parent().find('ul').hide().data('showing-time', 0);
}
}, 100);
});
});
Hope this helps.
update
Code updated.
I suggest just put the sub menus next to the parent menu item(here, means li > a element) to get a better result.
Here's how I would go about it. You don't need javascript at all, at least not for simple hiding/showing. But, if you want to add delays, I would strongly suggest using jquery only to add/remove appropriate css classes with a settimeout.
css:
.menu {
position: relative;
display: inline-block;
}
.submenu {
display: none;
position: absolute;
left: 100%;
}
.menu li:hover > .submenu, .submenu.show {
display: inline-block;
}
html:
<ul class="menu">
<li>Item 1</li>
<li><ul class="submenu">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li><ul class="submenu">
<li>Sub-subitem 1</li>
<li>Sub-subitem 2</li>
<li>Sub-subitem 3</li>
</ul>
Subitem 3</li>
<li>Subitem 4</li>
</ul>
Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
js:
$('body').on('mouseleave','.submenu', function(e) {
var jTarget = $(e.currentTarget).addClass('show');
setTimeout(function() {
jTarget.removeClass('show');
}, 500);
})
Check out this jsfiddle with the js delay:
http://jsfiddle.net/LxL4N/1/