Link to home
Start Free TrialLog in
Avatar of FairyBusiness
FairyBusinessFlag for United States of America

asked on

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

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?
Avatar of Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı
Flag of Türkiye image

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

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

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

ASKER

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

Would you please insert the html block of #menu ... are you using <a> ... or just getting innerhtml of li
<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
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

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>
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.
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

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

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

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
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

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

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

its bumming me out
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>
not sure how I forgot that last night.  But its still not working
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.
finally it alerts!! thats a start
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

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

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
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

nope, it still says its undefined
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;
its not alerting anything, so then its not getting into the function??


http://gowiththemaster.com/tleithoff/test.php
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

ASKER CERTIFIED SOLUTION
Avatar of Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı
Flag of Türkiye image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
That last question should read:

Also, does it matter where the javascript script goes on the page? (like does it have to go below)
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for sticking with me on this!!