Grow your CSS skills. Land your dream job.

Accordion menu with scrolling/paging

  • # April 29, 2008 at 9:15 am

    Does anyone know how to add scrolling or paging within an accordion menu?
    Something similar to the right hand menu at Yahoo! Auto (http://autos.yahoo.com)
    but within one of the sub menus so that someone could click through a bunch of
    images in a particular category/menu item. Thanks.

    # April 29, 2008 at 11:58 am

    I think the best way to do this is to START with a scroller, and then add the accordion inside it.

    I did this on the Chatman Design website. Page scroller with accordions inside it:
    http://chatmandesign.com/print.php

    There is no magic too it, just pick a page scroller you like, alter it up, put accordions inside. Definitely stick to a single javascript library when you do it though, to keep things consistent.

    # April 29, 2008 at 6:20 pm

    Thanks Chris for the example. How about the opposite where the scrolling/paging is inside one of the menu items of the accordion menu. For example an accordion menu with 7 menu items. Each menu item lists up to 5 links or images per ‘menu/page’. And if there are more than 5 links/images/thumbnails, one could click a next button and page/scroll through the rest of the listings. All the paging/scrolling would all be done within the selected menu item of the accordion menu. I hope that makes sense. Thanks.

    # April 29, 2008 at 7:03 pm

    Sure, just start the opposite way. Find a "widget" of an accordian that you like and get that working. Then for the content of each accordian, find a widget for a page scroller and drop that in there. In my experience these little widgets generally play pretty nice together and you shouldn’t have much trouble.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".