On a static website, the main navigation is hidden on small screens and revealed when a hamburger icon is clicked. When revealed, I want the tab focus to be removed from the hamburger icon and set to the first menu item. I've tried various solutions found here, like using setTimeout, but nothing has worked.
<div class="header__item header__logo">
<div class="header__icon header__icon--mobileTrigger">
<button class="hamburger hamburger--spin" type="button" aria-label="open menu">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="header__item header__nav" aria-label="main menu">
<nav role="navigation" class="nav__wrapper">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li>Let's get started</li>
<li>More solutions</li>
</ul>
</div>
</nav>
</div>
<script>
$(document).on("click", ".header__icon--mobileTrigger", function (e) {
$(this).find(".hamburger").addClass("is-active").attr("aria-label", "close menu");
$(".header__nav").attr({
role:"dialog",
"aria-modal":"true",
tabindex:"-1"
});
$("#menu-focus").focus();
});
document.addEventListener('focus', function() {
console.log('focused: ', document.activeElement)
}, true);
</script>
I've tried blur() on the hamburger icon, various tab values, setTimeout functions, query selector, I even tried hard-coding the role and other attributes on the nav instead of relying on the programmatic method. I have also looked for a function that might be overriding mine.
Apparently, I needed to lengthen the duration of the setTimeout. Maybe because of the animations? I am not sure. This worked:
setTimeout(function(){
$("#menu-focus").focus();
},300);
Related
I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
So i'm trying to make a jquery dropdown that adds and removes classes. It does work, but only once. If i try the dropdown again, it simply drops down and slides up right after. It's suppose to drop down after clicking a button and slide up after another click.
$(document).ready(function() {
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
});
The "btn-hover" class is meant to add the same css as it where in a hover state once the button is clicked.
--edit--
<div class="menu">
<div class="col-lg-12">
<button type="button" class="menuDrop btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="nav">
<li><a class="link" href="#">home</a></li>
<hr>
<li>portfolio</li>
</ul>
</div>
</div>
Using slideToggle and toggleClass should help you achieve this, and with less code:
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideToggle("slow");
$(".menuDrop").toggleClass("btn-hover");
});
Here's a fiddle: http://jsfiddle.net/scesR/
Hope that helps!
Bind it using change event, instead of click event.
$(".menuDrop").change(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});