Collapsable Menu and Sidebar

[Tom59593]

Hey guys,

I have a question about certain menu types and conceptully what you think I should be using here. I am performing a re-design of my current site(CURRENT SITE) and I wanted your input on some navigation styles.

If you click on the link above, you will be taken to a page with primary navigation across the top, and then a sidebar with all of the episodes of my show that are available for download. It's all fine and dandy, and it's how my site will stay in the future. However, everytime that I add a new episode to my site, I also have to do a number of things:

1. Create A New Mix Page
2. Add the url to the list of links on the right
3. Copy and paste that line of code into all previous mix pages
4. Save and upload all mix pages

This can be extremely tedious, and it turns a 5-minute operation into an hour-long process! Also, the more mixes that I add, the more work is required for the next one, so it just keeps spiralling out of control!!!

In order to fix the issue of updating content, I will be replacing that right side bar code with a php include so that I only have to update one file. So, that solves that problem.

The only problem that remains is what happens when I have 234 episodes? As it stands right now the list of links already takes up most of the page, and I would hate to make a user scroll through all of that just to get what they are after (the newest mix page).

So, here are my thoughts:

• Use a .php include for the right side so that I only have to update one item and the mix page when I publish a new mix
• Place the items in reverse-chronological order so that the newest mix page is at the top of the list, providing quick access to the most-visited link on my site
• Use a COLLAPSABLE MENU to seperate mixes by, say, year, so that the user can collapse 2008 if he doesn't want to look at anything but 2009

What do you think about those ideas? Also, if you do approve of the collapsable menu, could you provide any links to where I could learn how to code this using (x)html and css? I was thinking of using a collapsable menu similar to this.

Please let me know if you guys need any more information!

THANK YOU SO MUCH!!!

 

[sultan]

If you have any idea of adobe photoshop or css ( Cascading Style Sheet ) and html you will do that better

 

[PixelPusher]

Tom, I think the collapsible menu is a good idea. You could also just display the recent year, and the have an archived button that would show previous years for those visitors that were interested archived stuff. Now as far as achieving all with just html and css, not sure that will be possible. Off the top off my head, the opening and closing part will need to be done with javascript. Your example, uses js. The expand / collapse menu is a very easy function to create, in fact jquery has a very nice one that include some elasticity in the animation (open/closing) which gives it that extra touch.

I believe the jquery function is called: $(obj).slide(). A quick google search will find it.

 

[Tom59593]

Great!

PixelPusher, I think I will look up some information on that javascript function. The archive button also sounds like a decent idea.

Sultan, I will definitely be making the menu look A LOT nicer than the example showed...it was merely for sake of example!

I will get back to you with my findings...

THANKS!!!

-Tom-