Hi, I need some help with jquery drop down menu plugin. I am willing to pay for what I hope is a small job. Is anyone interested? I need to change the menu so that it expands on click rather than on hover. Seems simple to me (but I know nothing about hpw to do this!) Please get in touch if you can help.
Hi Cash, The link is http://www.phpinterviewquestion.com/jquery-dropdown-menu-plugin/ and it's version 2.0
Hi. Looking at the link you have supplied, open the php file in the package. Edit the following lines. $Jquerycode ='noCon("#dropmenu li").hover(function(){ Code (markup): to $Jquerycode ='noCon("#dropmenu li").click(function(){ Code (markup): This is untested but I've had a skip through the JQuery. Hope this helps
Hi Jhine, Thanks for making this your first ever post here! Welcome Someone else has solved the initial problem (though their post has not shown up - I got the email notification with the solution on it but no post still). However, it's presented a new problem in how to close the menu with a click as well as at the moment it just stays open. Any ideas? Thanks again, Jez.
Think I've got it right now drop-down-menu.js /*Plugin Name: JQuery Drop Down Menu Plugin URI: http://www.phpinterviewquestion.com/jquery-dropdown-menu-plugin/ Author: Sana Ullah Version: 1.5 Author URI: http://www.phpinterviewquestion.com/ Copyright 2009 - phpinterviewquestion.com THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.*/ $(document).ready(function(){ jQuery("#dropmenu ul").css({display: "none"}); // For 1 Level jQuery("#dropmenu li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul a span").text(''); // For 2 Level jQuery("#dropmenu li ul li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul li ul a span").text(''); // For 3 Level jQuery("#dropmenu li ul li ul li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul li ul li ul li a span").text(''); // For 4 Level jQuery("#dropmenu li ul li ul li ul li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul li ul li ul li ul li a span").text(''); // For 5 Level jQuery("#dropmenu li ul li ul li ul li ul li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul li ul li ul li ul li ul li a span").text(''); // For 6 Level jQuery("#dropmenu li ul li ul li ul li ul li ul li:has(ul) a").append('<span> »</span>'); jQuery("#dropmenu li ul li ul li ul li ul li ul li ul li a span").text(''); // For 7 Level jQuery("#dropmenu li").click(function(){ if (jQuery(this).parent().is("#dropmenu")) { jQuery(this).siblings().find("ul:first").fadeOut('fast'); } jQuery(this).find("ul:first").fadeIn('fast'); }); }); Code (markup): And the test page with links removed. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Plugin Name: JQuery Drop Down Menu Plugin URI: jquery-dropdown-menu-plugin/ Author: Sana Ullah Version: 1.5 Author URI: Copyright 2009 - phpinterviewquestion.com THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Jqury Drop Down Menu | Demo</title> <link href="css/menu_style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/drop-down-menu.js" type="text/javascript"></script> </head> <body bgcolor="#006666"> <ul id="dropmenu"> <li><a href="#" title="HOME">Home</a></li> <li class="page_item page-item-2"><a href="#" title="about">About</a> <ul> <li class="page_item page-item-26"><a href="#" title="About">About Me</a></li> <li class="page_item page-item-17"><a href="#" title="subpage">About Site</a> <ul> <li class="page_item page-item-23"><a href="#" title="yuiyu"> Plugin </a></li> </ul> </li> </ul> </li> <li class="page_item page-item-2"><a href="#" title="Site Content">Site Content</a> <ul> <li class="page_item page-item-17"><a href="#" title="subpage">About Site</a> <ul> <li class="page_item page-item-26"><a href="#" title="PHP">PHP</a> <ul> <li class="page_item page-item-17"><a href="#" title="subpage">About Site</a> <ul> <li class="page_item page-item-26"><a href="#" title="PHP">PHP</a> <ul> <li class="page_item page-item-26"><a href="#" title="PHP">PHP</a></li> <li class="page_item page-item-17"><a href="#" title="MySQL">MySQL</a> <ul> <li class="page_item page-item-26"><a href="#" title="PHP">PHP</a></li> <li class="page_item page-item-17"><a href="#" title="MySQL">MySQL</a></li> <li class="page_item page-item-23"><a href="#" title="OOPS"> OOPS </a></li> </ul> </li> <li class="page_item page-item-23"><a href="#" title="OOPS"> OOPS </a></li> </ul> </li> <li class="page_item page-item-17"><a href="#" title="MySQL">MySQL</a></li> <li class="page_item page-item-23"><a href="#" title="OOPS"> OOPS </a></li> </ul> </li> </ul> </li> <li class="page_item page-item-17"><a href="#" title="MySQL">MySQL</a></li> <li class="page_item page-item-23"><a href="#" title="OOPS"> OOPS </a></li> </ul> </li> </ul> </li> </ul> </body> </html> Code (markup):
And if you need the Wordpress plugin, open jquery-drop-down-menu.php and change the block between lines 345 and 362 to this: if($include==2) { $Jquerycode ='noCon("#dropmenu li").click(function(){ if (noCon(this).parent().is("#dropmenu")) { noCon(this).siblings().find("ul:first").slideUp("'.$fadeout1.'"); } noCon(this).find("ul:first").slideToggle("'.$fadein1.'"); });'; } else { $Jquerycode ='noCon("#dropmenu li").click(function(){ if (noCon(this).parent().is("#dropmenu")) { noCon(this).siblings().find("ul:first").fadeOut("'.$fadeout.'"); } noCon(this).find("ul:first").fadeIn("'.$fadein.'"); });'; } Code (markup): But I haven't tested that yet
Hi Cash, Thanks a lot for doing this. I have tested the WP plugin version on the site and it works fine. It now closes when you open a new menu level. Ideally I was thinking of a click to close so that when it's open you don't have to scroll down the page to see the other menus but I realise that I might be pushing the boundaries of free help (which I am very grateful to receive!) I now need to make some modifications within as each top level menu is a link and on clicking takes you to a new page which is also very annoying and confusing for the user. Thanks Cash!