The problem is with 2nd and 3rd menu item. Whenever I click the 3rd menu item, the 2nd menu item automatically gets selected/active along with the 3rd one. However, this doesn't happen with other menu items.
For instance(when clicking on the third menu item);
<ul id="menu-1" class="navmenu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464">
list item 1
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-456 current_page_item menu-item-466">
list item 2
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-446">
list item 3
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
list item 4
</li>
</ul>
Note: I have no clue where those different class on click are coming from.
I tried to add an active class on click and style accordingly but this didn't work. For instance;
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});
});
Here is the css :
.navmenu .current_page_item>a, .navmenu .current_page_ancestor>a, .navmenu .current-menu-item>a, .navmenu .current-menu-ancestor>a {
outline: none;
background-color: #7CD0AE;
color: #fff;
}
It's strange why the class on 2nd menu item has current-menu-item and current-page-item indexed when i click on the third one.
Do you have the CSS to look at? A github or jsfiddle of the relevant code would make it lot easier to help.
I replicated what you have here, and if you hover over each list item you can see they have the correct link. Seems like it's probably in the css, or else something not shared here.
https://jsfiddle.net/xpvt214o/814134/
The code below is because they make me add code when I link a jsfiddle
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});
Related
I have an a tag.
Disarray Body
When the link is open. the browser adds ==>aria-current="page". How can I select that element with the atribute of aria-current="page" And execute code to its parent and sibling?
I've tried this.
var items = $('.menu-item>a');
if (items.hasattr("aria-current", "page") === true) {
items.parent.css( "background-color", "red" )};
But it declears as undefined. how do I let jquery find out witch link is currently open in the brouwser. A.K.A. =>aria-current="page"?
Below you can find part of the html.
portriats
<ul class="sub-menu">
<li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
Disarray Body</li>
<li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
#Girls</li>
</ul>
Item2
<ul class="sub-menu">
<li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
object1</li>
<li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
Object2</li>
</ul>
Try using the Attribute Equals selector.
$('a[aria-current="page"]');
Fiddle
I see that you are trying to style the current page differently. Since the current page already has aria-current="page" (as it should), you can styling in CSS like follows, you can use the attribute selector:
[aria-curent="page"] {
background-color: red;
}
I want to check if any link of a parent is active (parents in my code id="menu-item-461" and id="menu-item-462") and then apply a extra class to the div with a .submenu class of that parent.
But here comes the tricky bit: the site should go to the link.
I got this far but now I'm stuck.
$(function(){
$("#menu-item-461 a").onclick(function(){
$("#menu-item-461 a").removeClass("selected")
$(this).addClass("selected")
return false;
})
But this does only apply it to the current link. and doesn't follow the hyperlink. So how do I check if any of the links from a class are active? and then apply css class to the .submenu?
<ul>
<li id="menu-item-461" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-461">
portriats
<ul class="sub-menu">
<li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
Disarray Body</li>
<li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
#Girls</li>
</ul>
</li>
<li id="menu-item-462" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-461">
Item2
<ul class="sub-menu">
<li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
object1</li>
<li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
Object2</li>
</ul>
</li>
</ul>
it should be something like this.
I used this years a go. but now I'm changing it to a wordpress theme.
function expandingMenu(num) {
var speed = 200;
var item_title = $("#menu-item-461 a").eq(num).children(":first");
var items = $(".submenu").eq(num).children().filter(function (index) { return index > 0; });
/* hide items if not active */
if (items.is(".active") === false) {
items.hide();
}
/* add click functions + pointer to title */
item_title.css({cursor:"pointer"}).toggle(
function () {
items.show(speed);
}, function () {
items.hide(speed);
}
)
}
I'd like to be able to add and remove classes based on the users mouse moving over certain areas. Below is the navigation code as generate by WordPress:
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us</li>
</ul>
</nav>
I've come up with the following JavaScript that targets the <li> in order to change the class of the link within the <li>:
<script>
$(document).ready(function(){
$('#site-navigation li').mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li'').mouseleave(function(){
$('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
//$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');
});
});
</script>
I've checked the Console and it looks like the event isn't even firing for the code to work. Any help is greatly appreciated.
Check out this fiddle.
Here is the snippet. (I have added alert on enter and leave events for testing).
$(document).ready(function() {
$('#site-navigation li').mouseenter(function() {
alert("Enter " + $(this).text());
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li').mouseleave(function() {
alert("Leave " + $(this).text());
$('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
//$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma
</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com
</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us
</li>
</ul>
</nav>
When adding/removing classes with jQuery, they should be space separated, not comma separated. So:
$(this).find('li.menu-item a').addClass('animated bounceIn');
Also, you shouldn't nest your mouseleave inside your mouseenter functions. Also, you should use $.on instead.
Also, within your event handlers, you aren't accessing your elements correctly. $(this) refers to the element that has been entered or left. Since you've set the mouseenter handler on the <li> elements, $(this).find('li.menu-item a') finds nothing.
Try this:
// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');
$listItems.on('mouseenter', function(){
$(this).find('a').addClass('animated bounceIn');
});
$listItems.on('mouseleave', function(){
$(this).find('a').removeClass('animated bounceIn');
});
All of this said, if you're simply trying to have an animation on hover, you can achieve that in CSS only with a single class on your <a> elements. The jQuery might be overkill, here.
$('#site-navigation li'')
should be either
$('#site-navigation li')
or
$("#site-navigation li")
(You have wrong quote marks)
and prevent using selector's repetition, do it like this:
var $el = $('#site-navigation li')
$el.mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated bounceIn');
$(this).find('.span').addClass('fadeInUp');
});
$el.mouseleave(function() {
$(this).find('li.menu-item a').removeClass('animated bounceIn');
}
For further reading: http://www.sitepoint.com/efficient-jquery-selectors/
Good Luck
I'm pretty new to the whole jQuery scene so I do apologise if I'm being dumb however I've tried my hardest to resolve this myself.
I am using jQuery to manipulate a CSS UL menu. I've got a jQuery which works for 3/4 of it's requirements. jQuery finds any items in the UL with children and appends a span to them. The span is used to house a drop down arrow to open the sub-menu.
Clicking the sub-menu opens it okay and clicking anywhere on the page hides the sub-menu okay with the $(document) function I've added, but for some reason, once the sub-menu is open, the second half of the if statement in the .click function doesn't close the menu.
Any thoughts? Platform is WordPress and the menu is generated by wp_nav_menu for what it's worth.
Non-functional part of the jQuery script is the second half of the if statement after the else.
jQuery
$(document).ready(function(){
$('div.sub-menu-wrap').parent().append('<span> v </span>');
$('ul.nav-menu li span').hover(function(){
$(this).toggleClass('hover');
})
$('ul.nav-menu li span').click(function() {
if(!$('div.sub-menu-wrap').is(':visible')) {
$('ul.nav-menu li span').parent().addClass('drop');
$('ul.nav-menu li span').siblings('a').addClass('drop');
$('div.sub-menu-wrap').show();
} else {
$('ul.nav-menu li span').parent().removeClass('drop');
$('ul.nav-menu li span').siblings('a').removeClass('drop');
$('div.sub-menu-wrap').hide();
}
})
$(document).mouseup(function(e){
var container = $("div.sub-menu-wrap");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
$('ul.nav-menu li span').parent().removeClass('drop');
$('ul.nav-menu li span').siblings('a').removeClass('drop');
$('div.sub-menu-wrap').hide();
}
});
});
Now with added HTML.
<div class="nav-menu-wrap">
<ul class="nav-menu" id="menu-navigation-menu">
<li class="first-item menu-item menu-item-type-post_type menu-item-object-page menu-item-251" id="menu-item-251"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-261 current_page_item menu-item-has-children menu-item-271" id="menu-item-271">
<div class="sub-menu-wrap" style="display: none;">
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441" id="menu-item-441"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461" id="menu-item-461"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451" id="menu-item-451"></li>
</ul>
</div>
<span> v </span>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241" id="menu-item-241"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211" id="menu-item-211"></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-201" id="menu-item-201">li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221" id="menu-item-221"></li>
<li class="last-item menu-item menu-item-type-post_type menu-item-object-page menu-item-231" id="menu-item-231"></li>
</ul>
</div>
The problem is your $(document).mouseup function. It's firing before the click event on your UL, and is hiding the submenu. When you get into the UL click event, the submenu wrapper is hidden, and therefore you're only ever hitting the first condition in your if statement.
If you change the document mouseup to this, it should work. Just added the main menu wrapper to your containers so that you ignore the mouseup event.
var container = $("div.sub-menu-wrap, div.nav-menu-wrap");
I've created a dropdown menu in a site built on Wordpress. It works, but there's a problem; when the mouse hovers over the menu items, the dropdown menu keeps sliding up and down.
HTML
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20">Art Services
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">Home</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">Business</li>
</ul>
</li>
</ul></div>
</nav>
jQuery
$(document).ready(function() {
$(".menu-item").hover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click
$(this).hover(function() {
}, function(){
$(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover").css('display','block'); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Thanks!
The ".sub-menu" list is nested inside the 'menu-item', right? So you don't need a to trigger another hover() event. You can trim it down to:
$(document).ready(function () {
$(".menu-item").hover(function () {
//HOVER IN
$(this).addClass("subhover");
$(this).find(".sub-menu").stop().slideDown('fast');
}, function () {
//HOVER OUT
$(this).removeClass("subhover");
$(this).find(".sub-menu").stop().slideUp('slow');
});
});
And add stop() to stop extra running animation when user hover's in and out.
See demo here: jsfiddle.net/AbkXM/