1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with jquery drop down menu plugin for WP

Discussion in 'jQuery' started by Jez, Jan 15, 2011.

0
  1. #1
    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.
     
    Jez, Jan 15, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you give us a link to this plugin?
     
    Cash Nebula, Jan 17, 2011 IP
  3. Jez

    Jez Well-Known Member

    Messages:
    532
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    138
    #3
    Jez, Jan 17, 2011 IP
  4. jhine

    jhine Active Member

    Messages:
    25
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    53
    #4
    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 :)
     
    jhine, Jan 17, 2011 IP
  5. Jez

    Jez Well-Known Member

    Messages:
    532
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    138
    #5
    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.
     
    Last edited: Jan 17, 2011
    Jez, Jan 17, 2011 IP
  6. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Think I've got it right now :D

    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>&nbsp;&raquo;</span>'); 
	jQuery("#dropmenu li ul a span").text('');
	// For 2 Level
	jQuery("#dropmenu li ul li:has(ul) a").append('<span>&nbsp;&raquo;</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>&nbsp;&raquo;</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>&nbsp;&raquo;</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>&nbsp;&raquo;</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>&nbsp;&raquo;</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):
     
    Cash Nebula, Jan 17, 2011 IP
  7. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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 :eek:
     
    Cash Nebula, Jan 17, 2011 IP
    Jez likes this.
  8. Jez

    Jez Well-Known Member

    Messages:
    532
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    138
    #8
    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!
     
    Jez, Jan 18, 2011 IP
  9. eexpress

    eexpress Greenhorn

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    Thanks for sharing the codes! :)
     
    eexpress, Feb 3, 2011 IP