SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with creating an onclick slidedown menu...

    Hi

    I would like to create a slidedown menu similar to the one that can be seen here...

    http://www.tricksterteatro.ch/index.asp?pagina=1385

    The main points are:

    submenu slides down when main nav item is clicked, not on hover

    submenu stays open until another top level menu item is clicked, which makes the first submenu slide closed and the new submenu slide open

    active items in top level menu and submenu are highlighted.

    when a page linked to from a submenu loads, it's submenu is visible.

    I'm afraid when it comes to JS/jQuery, while I'm usually capable of modifying existing plugins to fit my needs like superfish etc, I'm not able to roll my own yet.

    Unfortunately I can't seem to find an existing plugin that basically does what I want on this occasion...

    Can anyone help me with this please?

    thanks!

    My HTML looks like this

    <div id="nav">
    <ul>
    <li><a href="*">Topnav1</a>
    <ul>
    <li><a href="*">Submenu1</a></li>
    <li><a href="*">Submenu2</a></li>
    <li><a href="*">Submenu3</a></li>
    </ul>
    </li>
    <li><a href="*">Topnav2</a>
    <ul>
    <li><a href="*">Submenu4</a></li>
    <li><a href="*">Submenu5</a></li>
    <li><a href="*">Submenu6</a></li>
    </ul>
    </li>
    </ul>
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can no one offer any help with this one?

    If anyone knows a plug-in that would be a good starting point for what I need that would be useful - I have looked but no luck. Spoilt for choice on hover plug ins but none seem to do onclick.

    If not, then I guess I'll try building what I need from scratch. I'm currently on chapter 3 of Sitepoint's jQuery: Novice to Ninja...Menu's are chapter 5. Bring it on.

  3. #3
    SitePoint Wizard spence_noodle's Avatar
    Join Date
    Jan 2004
    Location
    uk, Leeds (area)
    Posts
    1,264
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Visit jquery.com and download the files, also visit the tutorials page (link) where they have a number of ideas and scripts to use.
    "Don't you just love it when you solve a programming bug only to create another."

  4. #4
    SitePoint Wizard spence_noodle's Avatar
    Join Date
    Jan 2004
    Location
    uk, Leeds (area)
    Posts
    1,264
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    This might be what your after on this page

    Other effects can be found here
    "Don't you just love it when you solve a programming bug only to create another."

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    london
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi spence_noodle

    thank you for taking the time to give me some pointers - there's definitely some useful stuff there.

    I have skipped to the menus chapter of the jQuery - Novice to Ninja book and I am making some progress, but still quite a way to go.

    I have worked out how to make my menus slide down and also how to make a menu load in it's open state when it is active (but haven't got those two things working together yet!) also haven't managed to get a menu to close when another one opens yet either. Will keep trying and post my progress here in the next couple of days - have to work on something else right now...

    thanks again.


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
  •