Results 1 to 2 of 2

Thread: bullet list accordion menu header expand + link

  1. #1
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default bullet list accordion menu header expand + link

    1) Script Title: Bullet List Accordion Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

    3) Describe problem:

    I would like a header on the bullet list accordion menu to link to another page after the menu expands.

    I have implemented the following script as per a similar thread intended for the glossy accordion menu.(http://www.dynamicdrive.com/forums/s...t=33741&page=2)

    Code:
    <script type="text/javascript">
    (function($){
    $(function(){
    $('.menuheader').click(function(){
    var l = this.href;
    setTimeout(function(){window.location.href = l;}, 300);
    });
    });
    })(jQuery);
    </script>

    And here is the code from the menu

    Code:
    <ul class="menuheader expandable" href="pnuematicactuators.html">Pnuematic Actuators</ul>

    this seems to work fine in IE, how-ever firefox and chrome give an "undefined" error.

    probably something stupid i have missed? I am very new to web development and for the love of me cant seem to work out why this wont work.


    thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I've just updated my demo from that thread. It linked to a now outdated version of the script, and DD has since put in more stringent anti-hotlinking measures that rendered the script forbidden in many cases anyway. The new working demo (also updated in that thread):

    http://home.comcast.net/~jscheuer1/s...n/glossy_h.htm

    Only the first CSS Examples header link gets this new treatment.

    On to your problem. The href attribute is not valid for ul, so is probably being ignored. If you were to use getAttribute(), it might work, but would still be invalid. Starting in HTML 5 the data hyphen attribute is valid for all elements. So you could do:

    Code:
    <ul class="menuheader expandable" data-href="pnuematicactuators.html">Pnuematic Actuators</ul>
    And in your script code:

    Code:
    <script type="text/javascript">
    (function($){
    	$(function(){
    		$('.menuheader').click(function(){
    			var l = this.getAttribute('data-href');
    			setTimeout(function(){window.location.href = l;}, 300);
    		});
    	});
    })(jQuery);</script>
    Notes:

    • To be valid the page would need an HTML 5 DOCTYPE. But this will work in virtually all, probably all standards invoking DOCTYPES.

    • Alternatively, you could put a real link inside the ul, give it the class that allows it to function, and style it to take up the entire ul.


    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 05-22-2011 at 05:50 PM. Reason: updated demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •