I have a simple Mega Menu. I am trying to display the sub menu of the parent menu item clicked. But for some reason when I click the parent item all the sub menu's are displaying instead of the clicked parent item sub menu. What I am doing wrong.
Here is my JSFiddle link
https://jsfiddle.net/jokcLjkb/4/
here is my js code.
$(document).ready(function() {
$("a.drop").on('click', function(e) {
e.preventDefault();
$("ul.mainNav li > .drop-full-col").css("display","block");
});
});
Thanks and Appreciate it
Your line:
$("ul.mainNav li > .drop-full-col")
Will select all the submenus because you target the main nav and all the <div class="drop-full-col"> elements. You need to select only the ones relative to the link you click on, and to do that you need to use this to refer to the link being clicked on. So change:
$("ul.mainNav li > .drop-full-col").css("display","block");
to
$(this).closest('li').find(".drop-full-col").css("display", "block");
jsFiddle example
.closest('li') will look for the closest list item when you click the link, and .find(".drop-full-col") will then search down the DOM for the div you want.
Related
I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?
You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.
I want this menu: Horizontal drop down menu to push o move the content down, is it possible? Because when I change the position to relative (it pushes) in the "submenu" , the tags a's don´t continue in the same line as the example. Help would be appreciate.
You'd have to something like this to the HTML structure.
<menu>
<ul>
<!-- main menu -->
</ul>
</menu>
<nav>
<!-- sub navigation -->
</nav>
<main>
<!-- your content -->
</main>
Each element inside the menu would need to correspond to an element in the sub navigation. You could do this with ids and data attributes.
//in main menu
<li data-menu="downloads"></li>
//in sub navigation
<div id="downloads"></div>
Then the javascript would listen to a click event in the main menu, and then show the correct sub navigation. If you click a main menu item twice, it should close the sub navigation panel. Here's jQuery to make it easy to read:
$('menu').on('click', 'li', function(){
//get the id of the li
var id = $(this).attr('data-menu');
//select the correct element and check it's current visibility
var navigation = $('#' + id);
var isHidden = navigation.is(':hidden'); //returns true or false
//close all navigation items
$('nav').children('div').hide();
//if the navigation item was hidden, show it
if(isHidden){navigation.show()};
});
Just as an aside, jQuery 3.0 .show() and .hide() do different things than just toggle display:none;
whenever the user the tabbed menu, from then, the selected tabbed menu should be selected[in background color] until the user select next any one of the tabbed menu. each tab menu has each page on its body content.
in code, the selected tab menu should have attribute class="selected" inside the html until user select next equivalent menu, i need this in javascript or in jquery.
Any help? please
my html code for this
<ul class="mainnav" id="mainnav1">
<li><span>Home</span></li>
<li><span>Test orders</span></li>
<li><span>Access arrangements</span></li>
<li><span>Pupil registration</span></li>
<li><span>Teacher assessment</span></li>
<li><span>Pupil results</span></li>
<li><span>Phonics screening check</span></li></ul>
Hope this can help.
$("#mainnav1 li a").on("click", function(){
$("#mainnav1 li a").removeClass("active");
$(this).addClass("active");
return false;
});
jsfiddle
I have a drop down menu ul when I am on the page I would like to have the drop down menu stay so I want to show the ul item only if it has a li element with the class ".current-menu-item" in it. I found this code, but it would show all drop downs (.sub-menu) I only want to have the one with the ".current-menu-item" in it to be shown:
if ($(".sub-menu").find(".current-menu-item").length > 0){
$(".sub-menu").css('display', 'block');
}
How can I achieve this?
Simply use :has selector:
$(".sub-menu:has(.current-menu-item)").show();
Please look at http://my-webpresence.com/work/yasir/dinecart/menu.html#.
When you hover over the restaurants in the top menu and then hover over 'Browse' and then on any of the links in the menu, the entire menu 'flashes/flickers' as you move over ANY of the links.
What is the problem and how can I fix this?
Thanks
This may not be a complete solution, but it might help you locate the primary issue. Each time you hover over one of the top links "Featured" "New Restaurant" "By Category" "By Location" "See All", the li under #flyout-menu goes from "active selected" to "browse" to "active selected". That's when the flickering is occurring.
It may have something to do with this function here:
$("#flyout-menu li").hover (function () {
$("#flyout-menu li > div").hide();
$("#flyout-menu li").removeClass('selected');
$(this).addClass('selected')
$(this).children('.nav-sub-1-right').show();
});
Your Flyout menu javascript hides the <div> for a moment while you remove and re-add the selected class on your <li> nodes. then the <div> is redisplayed. This causes the flickering. Don't hide the <div>.