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>
Related
I have two divs. When I click on 3 dots , then the div is appearing and on clicking the same 3 dots , same div is disappearing. But I want to hide the div, even if I click anywhere in the document.
There are two circles. When I click on one circle, then a div is shown and when I click on another circle, then the opened div is closing and related div is opening but when I click anywhere on the document, then none of the div are closing.
$("#discussion_declined , #discussion_pending").click(function() {
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float: right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color: white;
position: absolute;
left: 9px;
top: 1px;
}
.discussion_edit_div {
background: #FFFFFF;
display: none;
position: absolute;
right: 35px;
border: thin #ced0d1 solid;
z-index: 1001;
width: 150px;
box-shadow: 0px 3px 3px #ccc;
}
ul li {
padding: 5px 15px;
list-style-type: none;
color: #838383;
}
ul li:hover {
background: #eeeded;
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_declined"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_pending"></div>
</div>
<div class="discussion_edit_div">
<ul>
<li> <span class="glyphicon glyphicon-trash"></span> Replicate</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
<li><span class="glyphicon glyphicon-ban-circle"></span> Deactivate</li>
</ul>
</div>
</div>
Praveen's answer is nice but you can also achieve the same without tweaking your HTML.
Just add this to your jQuery:
$(window).click(function() {
//Hide the menus if visible
$('.discussion_edit_div').hide('fast');
});
$("#discussion_declined , #discussion_pending").click(function(e) {
e.stopPropagation();
var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
relatedDiv.toggle("fast");
$('.discussion_edit_div').not(relatedDiv).hide('fast');
});
And your are good to go.
This achieves one more thing which is that once you have opened one ul, then you can directly toggle to another ul by clicking once. In Praveen's answer you have to click twice in order to open the other ul.
Check the link:https://jsfiddle.net/zfqqqr1c/1/
How Bootstrap handles this is interesting. They have a mask, and the only thing you can click is the mask or the items in the menu.
$(function () {
$(".mask").hide();
$("nav > ul > li > a").click(function () {
$(this).closest("li").addClass("open");
$(".mask").show();
return false;
});
$(".mask").click(function () {
$(this).hide();
$(".open").removeClass("open");
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}
.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}
nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
<ul>
<li>
Main Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>
Main Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
I successfully created this not so bad css-only dropdown. I'm trying to hide the .submenutwo so that it is only visible when .submenu is on hover. If we can do this with css only that would be nice. But if javascript or jQuery can help it's fine.
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2
</li>
<li>Option 2
</li>
<li>Option 2
</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
<li>Green Grapes
</li>
<li>Red Grapes
</li>
</ul>
</li>
</ul>
</nav>
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
Here's how you can do it in css. Basically, what's happening here is. At first, you just need to hide .submenutwo. After the hover triggered, you just need to bring back the display to the default or even other display value will do.
may be this will help u
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height:auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
<li>Green Grapes</li>
<li>Red Grapes</li>
</ul>
</li>
</ul>
</nav>
I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});
I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!
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.