SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery menu help

    I have an idea for compressing a large menu where at a certain point I'd like to apply a class to list items and make them collapse and expand on click. For example consider the following:

    News
    - item1
    - item2
    - item3

    As the menu stands if I click on item1 I will see the child links and its parents siblings:

    News
    - item1
    child1
    child2
    child3
    - item2
    - item3

    Using jQuery how could I "hide" the links for item2 and item3 behind an expander?

    News
    - item1
    child1
    child2
    child3
    + more news (when expanded shows item2, item3)

    The menu is generated dynamically by a CMS so I can apply classes to the list items at any time if necessary.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Daz View Post
    I have an idea for compressing a large menu where at a certain point I'd like to apply a class to list items and make them collapse and expand on click.
    Treeview
    http://jquery.bassistance.de/treeview/demo/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not quite what I want, though maybe can fit? Where those examples don't meet my needs are once you've clicked on the first link and the child links are showing. At this point I want the parent siblings ie link2, link3 etc to be hidden and only accessible by clicking a "more" type link.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That then sounds more like an accordion menu.

    http://jquery.bassistance.de/accordion/demo/

    However, feel free to also have a dig around the web sites of Stu Nicholls.
    he specialises in CSS and JavaScript menus.

    CSS Menus: http://www.cssmenus.co.uk/
    JavaScript Menus: http://www.stunicholls.com/menu/index.html

    For example: Professional Concertina Slide #2
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've sort of got this figured but it's not quite working. For an expander typically you have to wrap the portion with a div preceded by a toggle link. My problem here is the elements I want to hide are part of an unordered list so inserting a div would be invalid markup.

    My alternative might be to add a class to these list items and then using jQuery, at run add the necessary mark up for it to validate eg:

    Code:
    <ul>
       <li>item 1
       <ul>
         <li>child1</li>
       </ul>
    </li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>
    becomes

    Code:
     <ul>
       <li>item 1
       <ul>
         <li>child1</li>
       </ul>
     </li>
    </ul>
    <a id="toggle" href="#">show more</a>
    <ul id="show">
     <li class="hide">item 2</li>
     <li class="hide">item 3</li>
    </ul>
    So dynamically the anchor and the ul with id="show" is added via jQuery. Only problem with that is the original </ul> needs to close earlier.


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
  •