How to make a menu link redirect to its first li child link?

FairyBusiness
FairyBusiness used Ask the Experts™
on
Hi, I am trying to write a function that when a menu link is clicked it automatically re-directs to its first li child's link:

$('#menu > li:parent').click(function () {
    $(window.location).attr('href', '#menu > li:child');
});

Open in new window


Its not working though.  Anyone know how to make this happen?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
As You can see here at http://www.w3schools.com/TAGS/tag_li.asp li does not have an attribute href
so you may try
 
$('#menu > li:parent').click(function () {
    var target_url=this.html();//if you want to get url from li text
    //var target_url=$('#menu > li:parent > a').attr('href') ;//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
    window.location.href=target_url;
});

Open in new window

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
btw you were not getting any value with
'#menu > li:child' in line 2 ....

$('#menu > li:child').attr('attr_name') gets it

Author

Commented:
when I click 'about us"

its not going to:

http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=submenus

its still going to:

http://gowiththemaster.com/tleithoff/about.php?id=1&type=1blurb&table=menus

$('#menu > li:parent').click(function () {
    //var target_url=this.html();//if you want to get url from li text
    var target_url=$('#menu > li:parent > a').attr('href') ;
	//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
    window.location.href=target_url;
});

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
Would you please insert the html block of #menu ... are you using <a> ... or just getting innerhtml of li

Author

Commented:
<ul id="menu">
<li><span></span><a href="about.php?id=1&type=1blurb&table=menus">about us</a>

thats the beginning of my menu

Author

Commented:
maybe this is better

					<ul id="menu"> 
						<li><span></span><a href="#page_1">About Us</a> <!-- KITCHEN MASTER -->
							<ul class="ul_1">
								<li><a href="#page_more">Kitchen Master</a></li>
								<li><a href="#page_more">Our Designers</a>
									<ul class="ul_2">
										<li class="first"><a href="#page_more">Glenn Ray</a></li>
										<li><a href="#page_more">Phillip Weitlauf</a>
										<li class="end"><a href="#page_more">Alison Wallace</a></li>
									</ul>
								</li>
								<li><a href="#page_more">Why The Master?</a></li>
								<li><a href="#page_more">Portfolio</a></li>
								<li class="end"><a href="#page_more">Privacy/Terms</a></li>
							</ul>
						</li>

Open in new window

Author

Commented:
but thats just an example that came with the template.  My links are different. . .

but if about us is clicked:

<a href="#page_1">About Us</a>

I want it to go to the next li:

<li><a href="#page_more">Kitchen Master</a></li>
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
Hmm try ;


 
$('#menu:first > li:eq(0) > a' ).click(function () { 
      $(' > li:eq(1) > a',this:parents(‘ul:eq(0)’) ).click(); 
      return false;
    });

Open in new window



Unless you decide the html structure and behavior of them in a sequential way, i cannot generalize this but i'm sure it can be done after that.

Author

Commented:
That didnt work. I think you were closer with the other one.  I modified it but I dont think the syntax is right.  What do you think of this though?  (maybe you can see my train of thought)

$('#menu > li:parent').click(function () {
    //var target_url=this.html();//if you want to get url from li text
    var target_url=$('(this) > .ul_1 > li:parent > a').attr('href') ;
	//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
    window.location.href=target_url;
});

Open in new window

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
what i see here is
$('#menu > li:parent') is same as $('#menu)
because you are first getting #menu then select its child li (and dont indicate which child) and then select it's parent (#menu itself)

maybe you can try with this way


var source_link_container=$('#menu:first > li:eq(0)');

$(source_link_container+' > a' ).click(function (source_link_container) { 
      var target_url=$(source_link_container+':parent > li:eq(1) > a' ).attr('href') ;
      window.location.href=target_url;
      return false;
    });

Open in new window

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:

Author

Commented:
That didnt work, but I just realized we are not even getting into the function so it may be for other reasons:

I tried to do an alert and nothing!

$('#menu > li:parent').click(function () {
    //var target_url=this.html();//if you want to get url from li text
    var target_url=$('#menu > li:parent > a').attr('href');
	alert(target_url);
	//if you want to get url from an a inside li , you may use this instead of #menu > li:parent
    window.location.href=target_url;
});

Open in new window

Author

Commented:
I cant even get this to alert out:  why??

<script type="text/javascript">
$(document).ready(function() {

$('#menu > li:parent > a').click(function () {
	alert('hello');
});

});
</script>

<ul id="menu">
	<li><a href="#">Hello</a></li>
	<li><a href="#">Hi</a></li>
</ul>

Open in new window


http://gowiththemaster.com/tleithoff/test.php
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
as i've told before
$('#menu > li:parent') is same as $('#menu)
because you are first getting #menu then select its child

do not use parent .... it selects selected element's parent which is #menu here

You need to indicate which li should be selected.

 
$('#menu > li:eq(0) > a').click(function () {
        alert('hello');
});

Open in new window

Author

Commented:
ok, I changed it but its still not working. . .

http://gowiththemaster.com/tleithoff/test.php

its bumming me out
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
Because you are using jquery without adding it to html

in the head block of your html add this line ;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>

Author

Commented:
not sure how I forgot that last night.  But its still not working
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
sorry , my fault ... please use

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" /></script>

at the moment cdn above is not responding somehow.

Author

Commented:
finally it alerts!! thats a start

Author

Commented:
ok now for this.  Is there a way to whenever one of the parent links are clicked the first child link's url is used instead?

so for the first one, instead of going to msn.com it would go to google.com.  and the second one would go to iupui.edu instead of myspace.com  ??

<ul id="menu">
	<li><a href="msn.com"></li>  <!-- parent link -->
		<ul class="children">
			<li><a href="google.com">Hello</a></li>  <!-- first child link -->
			<li><a href="yahoo.com">Hi</a></li>
		</ul>
	<li><a href="facebook.com"></li>
	<li><a href="myspace.com"></li>  <!-- parent link -->
		<ul class="children">
			<li><a href="iupui.edu">Hello</a></li>  <!-- first child link -->
			<li><a href="ku.edu">Hi</a></li>
		</ul>
	<li><a href="amazon.com"></li>
</ul>

Open in new window

Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
this should work

 
$('#menu > li > a').click(function () {
        var target_url=$(':parent > ul > li:eq(0) > a',this).attr('href');
        alert(target_url);
        window.location.href=target_url;
});

Open in new window



but i think your html structure is wrong because

<ul>
<li>first item </li>
<li>second item </li>
</ul>

you need to place elements between li
i'm not sure other way is also allowed at the moment but syntax like below seems faulty ..
<ul>
<ul>
<li>first item </li>
</ul>
<li>first item </li>
<li>first item </li>
</ul>


i suggest you this instead

 
<ul id="menu">
        <li><a href="msn.com">  <!-- parent link -->
                <ul class="children">
                        <li><a href="google.com">Hello</a></li>  <!-- first child link -->
                        <li><a href="yahoo.com">Hi</a></li>
                </ul>
        </li>
        <li><a href="facebook.com"></li>
        <li><a href="myspace.com">  <!-- parent link -->
                <ul class="children">
                        <li><a href="iupui.edu">Hello</a></li>  <!-- first child link -->
                        <li><a href="ku.edu">Hi</a></li>
                </ul>
        </li>
        <li><a href="amazon.com"></li>
</ul>

Open in new window

Author

Commented:
Well, this is the structure that came with the template and I dont want to screw anything up so I just left it with its default syntax:

					<ul id="menu"> 
						<li><span></span><a href="#page_1">About Us</a> <!-- KITCHEN MASTER -->
							<ul class="ul_1">
								<li><a href="#page_more">Kitchen Master</a></li>
								<li><a href="#page_more">Our Designers</a>
									<ul class="ul_2">
										<li class="first"><a href="#page_more">Glenn Ray</a></li>
										<li><a href="#page_more">Phillip Weitlauf</a>
										<li class="end"><a href="#page_more">Alison Wallace</a></li>
									</ul>
								</li>
								<li><a href="#page_more">Why The Master?</a></li>
								<li><a href="#page_more">Portfolio</a></li>
								<li class="end"><a href="#page_more">Privacy/Terms</a></li>
							</ul>
						</li>

Open in new window


I tried your code but it says its undefined in the alert:

http://gowiththemaster.com/tleithoff/test.php
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
try this ;

$('#menu > li > a').click(function () {
        var next_ul_tag=$(':parent',this).next('ul');
        var target_url=$(' > li:eq(0) > a',next_ul_tag).attr('href');
        alert(target_url);
        window.location.href=target_url;
});

Open in new window

Author

Commented:
nope, it still says its undefined
Erdinç Güngör ÇorbacıPHP Development Team Leader

Commented:
this is ok -tested-

 
<script type="text/javascript">
$('li a').click(function () {
    
        var next_ul_tag=$( $(this).parent());
        var target_url=$('> ul > li:eq(0) > a',next_ul_tag).attr('href');
        alert(target_url);
        window.location.href=target_url;
        return false;
});
</script>

Open in new window


captures
<a href="#page_more">Glenn Ray</a>
when you click
<a href="#page_more">Our Designers</a>

and so on ... if some sub menus will not fit to this structure just check if defined or not ..

if(target_url!=undefined) window.location.href=target_url;

Author

Commented:
its not alerting anything, so then its not getting into the function??


http://gowiththemaster.com/tleithoff/test.php

Author

Commented:
I think this might make it easier.  I put classes on the parent links:

(but my jquery syntax is not right)  But do you know how to make this work?

<script type="text/javascript">
$('.parent').click(function () {

        var target_url=$( $(this) '> li:eq(0) > a',next_ul_tag).attr('href');
        alert(target_url);
        window.location.href=target_url;
        return false;
});
</script>
<ul id="menu">
	<li><a class="parent" href="msn.com">msn</li>  <!-- parent link -->
		<ul class="children">
			<li><a href="google.com">google</a></li>  <!-- first child link -->
			<li><a href="yahoo.com">yahoo</a></li>
		</ul>
	<li><a class="parent" href="facebook.com">facebook</li>
	<li><a class="parent" href="myspace.com">myspace</li>  <!-- parent link -->
		<ul class="children">
			<li><a href="iupui.edu">iupui</a></li>  <!-- first child link -->
			<li><a href="ebay.edu">ebay</a></li>
		</ul>
	<li><a href="amazon.com">amazon</li>
</ul>

Open in new window

PHP Development Team Leader
Commented:
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" /></script>
    
    </head>
  <body>
  
<ul id="menu">
        <li><a class="parent" href="msn.com">msn</li>  <!-- parent link -->
                <ul class="children">
                        <li><a href="google.com">google</a></li>  <!-- first child link -->
                        <li><a href="yahoo.com">yahoo</a></li>
                </ul>
        <li><a class="parent" href="facebook.com">facebook</li>
        <li><a class="parent" href="myspace.com">myspace</li>  <!-- parent link -->
                <ul class="children">
                        <li><a href="iupui.edu">iupui</a></li>  <!-- first child link -->
                        <li><a href="ebay.edu">ebay</a></li>
                </ul>
        <li><a href="amazon.com">amazon</li>
</ul>

<script type="text/javascript">
$('.parent').click(function () {
        var parent_element=$(this).parent();
        var target_url=$(' .children > li:eq(0) > a ',parent_element).attr('href');
        alert(target_url);
        if(target_url!=undefined) window.location.href=target_url;
        return false;
});
</script>
</body>
</html>

Open in new window


this is the complete code you need

Author

Commented:
what makes you write it with the parent_element with it??

It didnt work with it, so I just took it out bc I couldnt figure out what it did (but thats not shocking as I'm not expert of jquery)  I did this and it worked!!

$('.parent').click(function () {
        var parent_element=$(this).parent();
        var target_url=$(' .children > li:eq(0) > a').attr('href');
        alert(target_url);
        if(target_url!=undefined) window.location.href=target_url;
        return false;
});


Also, where the javascript script goes on the page?

Author

Commented:
That last question should read:

Also, does it matter where the javascript script goes on the page? (like does it have to go below)
Erdinç Güngör ÇorbacıPHP Development Team Leader
Commented:
Yes  it does if it is instantly executed. If an element is not loaded or built by  browser  JS can not find that element and returns error.

Author

Commented:
Thanks for sticking with me on this!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial