I have a side menu that displays offcanvas. When you click the button, the canvas pushes left and opens the menu. I would like the menu to collapse and not remain open when a link is selected.
Here is the HTMl:
<header>
<nav class="menu" id="theMenu" ng-controller="MenuCtrl">
<div class="menu-wrap">
<a ng-href="/"><img src="/images/zj-logo.png" alt="Zach Janice" class="logo"></a>
<i class="fa fa-times menu-close"></i>
<a ng-href="/">Home</a>
<a ng-href="#/about">About</a>
<a ng-href="#/projects">Projects</a>
<a ng-href="#/services">Services</a>
<a ng-href="#/contact">Contact</a>
</div><!-- menu-wrap -->
<div id="menuToggle" class="active">
<i class="fa fa-bars"></i>
</div><!-- menuToggle -->
</nav>
</header>
jQuery:
(function(jQuery){
// Menu settings
jQuery('#menuToggle, .menu-close').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});
})(jQuery);
Any Help is greatly appreciated. Thanks in advance.
-Z
Since you're using toggleClass, you can just add .menu-wrap a to your selector which should toggle it off when clicked. The links won't be in view unless the classes are added, so you won't get any mis-clicks.
jQuery('#menuToggle, .menu-close', '.menu-wrap a').on('click', function(){
jQuery('#menuToggle').toggleClass('active');
jQuery('body').toggleClass('body-push-toleft');
jQuery('#theMenu').toggleClass('menu-open');
});
Related
I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (http://getbootstrap.com).
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
The part of the code is as follows:
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<div class="container">
<div class="row">
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<li>Events<span class="caret"></span>
<ul class="collapse list-unstyled" id="eventSubmenu">
<li > Link1 </li>
<li > Link2 </li>
</ul>
</li>
As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword
I have a sub-menu inside the navbar under the Services nav-item.
The expected behavior is once the Service is clicked, the sub-menu shows up. The actual behavior is: once the Service is clicked, the sub-menu flashes and disappears.
<nav id="main-menu">
<ul class="sf-navbar">
<li>
<a href="#home">
<div data-i18n="nav.home">Home</div>
</a>
</li>
<li>
<a href="#">
<div data-i18n="nav.services.title">Title</div>
</a>
<ul>
<li>
<a href="#service">
<div data-i18n="nav.services.ourservices">Our Services</div>
</a>
</li>
<li>
<a href="#how">
<div data-i18n="nav.services.howwework">How We Work</div>
</a>
</li>
<li>
<a href="#areascontainer">
<div data-i18n="servicearea.title">Service Area</div>
</a>
</li>
<li>
<a href="#why">
<div data-i18n="why.title">Why Choose Us</div>
</a>
</li>
</ul>
</li>
.....
</nav>
JS code:
wei.header = {
init: function(){
wei.header.superfish();
},
superfish: function() {
$( main_menu ).superfish({
popUpSelector : 'ul',
delay : 250,
speed : 350
});
},
...
I have tried to debug it, but have no clue where to start.
Here is the code that I am working on.
http://weistudio.com.au/
For some reason, SuperFish fails here on touchEnd event and only for the menu shown when you at the very top of the page (it works if you scroll page a bit - there is a clone of this menu).
To prevent it you could use something like <a href="#" onTouchEnd="(function (e) {e.preventDefault()})(event)">.
Or move it to an external method and use like this (as you using jQuery already):
$('.header-container').on('touchend', '.sf-with-ul', function (e) {e.preventDefault()})
I want the navbar button hover drop-down effect to only activate once one of the navbar buttons is clicked. After that once clicked outside like body hover again should be disabled. At the moment hover is working where if I move the mouse around it activate (hence hover effect) but this can be annoying if user meant to not use navbar.
So normally when hovering the navbar, buttons shouldn't drop down any list. But once any of the navbar button is clicked, till you click out side, like the body all navbar buttons should be hovering like normally. I tried some jQuery but wasn't successful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BAPTIST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./headerAndFooter.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav top-nav pull-right">
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>
I was having trouble with getting your navbar to work without all the css you have, so I used the generic Bootstrap 3 navbar from the site to show you.
What the code below does is this:
Anytime a link tag inside the nav is clicked, it will set the variable allowHover to true.
Anytime the users mouse enters the div with class of "content", allowHover is set to false.
I believe the other two functions are self explanatory, but if they require explanation, let me know.
let allowHover = false
$('nav a').click(function() {
allowHover = true
})
$('.content').mouseenter(function() {
allowHover = false
})
$('ul.nav .dropdown').hover(function() {
if(allowHover)
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})
$('ul.nav .dropdown').mouseleave(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})
Check out the codepen. Make sure you when you click a regular link in the nav, don't move your mouse outside of the navbar, or the dropdown won't work.
This is a close example to what you asked for, but I think its quite sufficient in getting you where you need to be to get your own rendition working.
I have created a burger menu using jQuery. And I have also created another jQuery function that automatically scrolls down the page to the anchor position when a link is clicked. Now what I need the burger menu function to do is close when one of the auto_close class links is clicked.
<nav>
<img class="logo_animated" src="images/popsies.svg">
<ul id="height">
<li class="auto_close">Welcome</li>
<li class="auto_close">Menu</li>
<li class="auto_close">Opening Times</li>
<li id="mob_icons">
<i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
</li>
<li class="mob_contact">Tel: 0113 0000000</li>
<li class="mob_contact">Email: example#yahoo.co.uk</li>
</ul>
</nav>
my burger menu function:
$(document).ready(function(){
$(".burger-button").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
Assuming that the show class reveals the burger menu, remove it if any of the a elements was clicked.
$("#height li a").click(function() {
$(".burger-button").removeClass("show");
});
since you are using toggle you can just add a reference to the .auto_close a links like so:
$(document).ready(function(){
$(".burger-button,.auto_close a").click(function(){
$("nav").toggleClass("show");
$("body").toggleClass("no_scroll");
});
});
the simplest way, if your burger is always open, when one of your links is clicked.
$('.auto_close').click(function(){
$(".burger-button").trigger('click')
})
else if it isnt sure the burger is always open, just remove the classes
$('.auto_close').click(function(){
$("nav").removeClass("show");
$("body").removeClass("no_scroll");
});
I have a functional side navigation that toggles in and out of display. Here is the "Filter" button...
<a href="#menu-toggle" style="background-color:black; color:white;" class="btn btn-default page-header" id="menu-toggle">
<span style="position:relative; top:2px; right: 5px;"class="glyphicon glyphicon-resize-horizontal"></span>
Filter</a>
and the JQuery...
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
When I add another clickeable link to toggle the same menu it breaks down but I can't understand why? I've changed the menu-toggle id to a class but that didn't help.
Here is the code that doesn't work i.e. the second clickable link that should give the same toggle effect...
<li class="sidebar-brand">
<a href="#" id="menu-toggle">Collapse
</a>
</li>
Add a class instead of an ID for multiple elements being operated on.
$(".menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Change <a id="menu-toggle"></a> to <a class="menu-toggle"></a>