Hi Im using wordpress and i have a navigation.
I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.
Currently my wp_nav_menu is in a nav container in its own div.
Any help would be really appreciated. I need this to be totally dynamic.
I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...
Thanks folks
Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.
$( "#idOfParent" ).on( "click", function () {
$(this).children().toggleClass("HideNav").toggleClass("ShowName");
}
Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.
Related
This is probably a very simple thing to do but its been so long since I've done anything web based I don't know where to start so thought I'd ask you helpful peoples in the hope someone might know of a good example somewhere online I can plunder for ideas.
I have a folder full of images, I want to create a html page that has a list of said images on the right and a number of panels/spaces those images can go on the left, users can then drag from the list into the panels and the images would be displayed. Users could then drag images off to remove them (a right click option would also be fine) or drag other images in to replace them.
I'm sure this kind of thing could be done in jquery but I've no clue where to start, anyone have any suggestions?
Thanks!
Are you looking for something like this? this will make it draggable in jquery. However this will be needed with plug-ins.
<script type="text/javascript">
$(function() {
$("Insert ID or CLASS").draggable();
});
</script>
However in order to prevent your draggable class or ID to be dragged everywhere you could use something like this:
$(function() { $( "ID OR CLASS" ).draggable({ containment: "window" }); });
Read the API https://api.jqueryui.com/draggable/#option-containment for more info.
This is how you can drop something in jquery:
$("ID OR CLASS").droppable();
I recommend you to use a toggle() on the classes when you dragg them to a div. So when you drop a class the image will be dropped instead of the div.
I hope this helped enough to give you a start with jquery. Although the question was very unclear and I hope you will edit the question to a bit more usefull one (So others can also benefit from it), I still wish you the best!
Here's a crude sample of what I'm dealing with: http://jsfiddle.net/dX2ux/1/
A client's in-house developed CMS dynamically creates menus using this HTML structure. It also comes with the jQuery script that is shown on the sample.
I want to edit the script so that it closes it's sibling's open menus before it toggles itself open. The show class is has to be toggled as well.
So far, I've come up with this: http://jsfiddle.net/dX2ux/2/
But if you play with it, it screws up when you click one of the sub menus.
Can anyone shed some light on how I might achieve the behavior I'm aiming for? Also, is this the best way to do it? Am I overthinking this?
Any help is appreciated. Thank you.
Not really sure if this is the "best" way per se, but with that kind of markup, this solution should work:
$('.toggle-menu').on('click',function(e){
e.preventDefault();
$(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
$(this).toggleClass('show').next().slideToggle();
});
Edited your fiddle to show the effect: http://jsfiddle.net/dX2ux/3/
I'm using a zencart with a css flyout header menu and I also want use the jquery slider widget as one of the options in this menu but when I put it in there the little sliders don't appear correctly, it's like they've collapsed.
I've put together a fiddle which although it has all the code doesn't seem to be working, it's hopefully something stupid I'm not doing coz all the code is there as far as I can see.
can anyone help me out please
http://jsfiddle.net/4VU8D/
EDIT: here's a slightly better but still not working fiddle
You've only included the jQuery Framework, but not the jQuery UI.
Does somebody know a Javascript menu (in Jquery if possible) similar to the javascript menu used in Oracle?
And it must work for ie7+ and ff2+
http://www.oracle.com/index.html
This menu does not display a list of element instead, it show an entire div.
You may look for something like this menu
Demo here
So I'm looking at slickdeals.net and amazon.com, and I found something very intriguing. It's basic for most of you guys out there, but it's new to me. For slickdeals.net, when you click login, a login box pops up like so. Also for Amazon.com, when you hover over the left navigational menus, a new menu pops up! I think it's JavaScript, but how does this work? How can I do something like that?
Update:
Thanks for the answers! One more question about Amazon's website. I've been looking at it with firebug. So how are they making their sub menu appear? I was expecting the mouseover to change the sub menu from display:none; to display: block; but this isn't the case. What is it change on the mouseover to make it appear?
Looks like a combination of CSS and Javascript. Look into JQuery and JQuery UI. It's easy to use and has things that make sites like theses easier to develop.
Look into the UI stuff for the menus and drop-downs and things like that. That JQuery UI is really cool and lets you make really dynamic web pages. They have examples on the JQuery UI site that you can look at.
You can view source to find these answers for yourself. It appears slickdeals.net is using jQuery for its javascript effects.
http://jquery.com/