I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
Related
When I put $("header nav ul").toggleClass("open") outside of the on click function it works, but it doesn't when I put it inside. Why is that??
The alert method is running, so clicking the a tag works.
<header>
<div class="wrapper">
<h1 class="logo">Blesto</h1>
<nav>
<h2>Main Navigation</h2>
<ul class="burger-nav-ul">
<li>Our Story</li>
<li>Menu</li>
<li>Reservations</li>
<li>News</li>
<li>Reviews</li>
</ul>
</nav>
</div>
</header>
$(document).ready(function(){
$(".burger-nav").click(function(){
alert("hi");
$("header nav ul").toggleClass("open");
});
});
You need to stop the default behavior of anchor element.
$(".burger-nav").click(function(event){
event.preventDefault();
alert("hi");
$("header nav ul").toggleClass("open");
});
You are right about alert being run, but then the default behavior is run which is going to wherever href points to. In this case, the same page.
I have a navigation bar in which I want to add a class to the li tag of the current page so that I can add css to show what page you are on. I have attempted it using this script:
<script>
$(function() {
$("#nav.ul.li").click(function() {
$("#nav.ul.li").removeClass("current");
$(this).addClass("current");
});
});
</script>
This is the html I am using for my navbar:
<nav id="nav">
<ul>
<li>Home</li>
<li>
Events Calender
<ul>
<li>Rules</li>
<li>Facilities</li>
</ul>
</li>
<li>Video Guides</li>
<li>Gallery</li>
<li>Store</li>
<li>Where to find us</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
However this script didn't work, so using javascript/jquery what is the best way to set a class on click to the li tags in my navigation bar?
All help much appreciated!
Remove the dots used like in #nav.ul.li and put space between them:
$(function() {
$("#nav ul li").click(function() {//or #nav > ul > li for direct element
$("#nav ul li").removeClass("current");
$(this).addClass("current");
});
});
Use . when you have a class on them like $('.sel') for <div class="sel"> and use # for element which has id as you normally use in css.
Use $("#nav > ul > li") instead of $("#nav.ul.li"). jQuery selector uses the same syntax as CSS. Other solution like $("#nav ul li") will also add/remove classes in unordered list puttes inside one of your <li> elements.
I have a menu with several options, I would like to know how to load different HTML into the same div (called #content) depending on the buttons you press of the menu.
I have this code for the menu:
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
<li>Biographie</li>
<li>Discographie</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
What do I need to do to send, for example, "index.html" into div#content when I press in the menu the option "Accueil"?
Using jQuery ajax you can do it
HTML
<div id="mainmenu">
<ul id="menu">
<li>Accueil</li>
<li>Qui suis-je?
<ul>
</div>
JAVASCRIPT(jQuery)
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});
jQuery load
You can use jQuery, it makes stuff like this easy:
Then you can do this:
$('#content>div').load('index.html');
You can either put this in onclick on some button, or in other place in your javascript code...
i've got a problem with getting my navigation bar to work. This probably is very easy to solve but i've been trying things for ages and can't get it to work. For CSS purposes i want the list item in the nav bar to get the class 'selected' when clicked and removed when a different nav bar item is clicked. For some reason it doesn't work. i'll show the code here:
<script type="text/javascript">
$('ul.navigation li a').click(function(){
$('ul.navigation li a').removeClass('selected');
$(this).addClass('selected');
});
</script>
I put this part in the <head>...</head>
This is the navigation bar which it's not having any effect on:
<div id="menuWrapper">
<nav>
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
</nav>
</div>
Now when i go to the browser and inspect the element it doesn't show any indication of adding the class 'selected' to the clicked menu item. When i check the console it gives some sort of error about the $('ul.navigation li a').click(function(){ part of the javascript saying it isn't a function.
I hope this has explained my problem, i still think it's probably easy to solve but i've been stuck on this for an entire day so i hope anyone here can help me.
Always wire up your events within a .ready() function.
If you apply the .ready function to the document, you ensure that your events are wired up. Read here for a brief introduction on using $(document).ready()
//Wait for the DOM to load and be ready:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
//Find the navigation link that is actually with the 'selected' class.
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
The element you are adding the 'selected' class doesn't look right.
In your html markup, you have the <li class='selected'><a href=''> but in your javascript you are removing and adding the selected class on the a element.
So you want to do something like:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
Unless you meant to have the class on the a element, then just your initial HTML was wrong, and then Sergio's solution would work.
Here you have the "selected" class in the "LI" element
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
but in your javascript you are removing and adding the "selected" class on the "A" element
So try this:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li').removeClass('selected');
$(this).parent().addClass('selected');
});
});
i have a navigation menu on top of my website .that li's content many pages with different urls. How to Add Active Class to a Navigation Menu Based on URL that in each page display it with a specific color?
<ul>
<li class="red">HOme</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
This snippet will be useful
HTML
<ul id="menuList">
<li>Home</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
JS
$('#menuList li').click(function(e){
e.preventDefault(); //Remove this in your main code
$('#menuList li').removeClass("active");
$(this).addClass("active");
});
CSS
.active{
background-color:green;
}
WORKING EXAMPLE
Give a class or ID to the ul. Then, assuming jQuery and an ID of nav:
$(function() {
$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
All you need then is to style the .active class. Also, this assumes your links are /my-page, so if you are currently in my-page, the link will become .active.