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

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;
});

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

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;
});

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

Select allOpen 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;
    });

Select allOpen 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;
});

Select allOpen 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;
    });

Select allOpen in new window

btw look here : http://api.jquery.com/child-selector/

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;
});

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

Select allOpen 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');
});

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

Select allOpen 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;
});

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

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

Select allOpen 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;
});

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

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

Select allOpen in new window

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)

Thanks for sticking with me on this!!