User Name
Password
AppleNova Forums » Programmer's Nook »

Collapsable menus (showing + hiding DIV layers)


Register Members List Calendar Search FAQ Posting Guidelines
Collapsable menus (showing + hiding DIV layers)
Thread Tools
Is it 1981?
Senior Member
 
Join Date: Mar 2005
Location: Londontown
 
2007-05-18, 09:40

I've got a site that I want to revamp, and have an idea for a navigation menu that seems simple enough, but as usual my CSS/ XHTML/ JavaScript coding skills are minimal to say the least.

Here's a magical animated GIF to show what I'm trying to achieve, annotated in red (apologies for the large size):


I've got some script that will give a very similar result, but the show/ hide layers command is achievable by clicking on the text "Add a comment", as opposed to a large clickable box/ area. Maybe I'm just being picky.

But yes, comments and suggestions would be very much appreciated if any of you can help.

Helvetica is my bitch.
System: 27" iMac i7, 2TB, 8GB RAM, Mac OS X Snow Leopard
  quote
adamb
Formerly “adambrennan”
 
Join Date: Oct 2005
Location: Northern Ireland
 
2007-05-18, 18:33

How are you representing the elements you want to be clickable? (northbank) Are they links or a list or whatnot? With my limited knowledge of javascript I would just put the javascript from inside the <a> tag on that example page, into the <img> or <li> with an onclick="functionName()" attribute. I'll have a look again tomorrow if no one else shows interest as it's something I wouldn't mind implementing myself into a site Im looking to get building soon. I'm sure there are a lot of people a lot more qualified than me here to help though.
  quote
Is it 1981?
Senior Member
 
Join Date: Mar 2005
Location: Londontown
 
2007-05-19, 04:32

I was planning on making it an <li> element as opposed to an <img>, but I really don't have much of a clue about these things - as most people can tell...

Don't bust your balls over it. If you're able to help, that'd be fantastic, but if not, not to worry.

Helvetica is my bitch.
System: 27" iMac i7, 2TB, 8GB RAM, Mac OS X Snow Leopard
  quote
digitalprimate
Senior Member
 
Join Date: Jan 2006
Location: Antwerp, Belgium
 
2007-05-19, 04:33

By the by, I think it's an absolutely beautiful interface.
  quote
Is it 1981?
Senior Member
 
Join Date: Mar 2005
Location: Londontown
 
2007-05-19, 17:28

That's really very kind of you to say - thank you.

As for the menu; I've managed to find a script that'll do pretty much what I want; and I've quickly (and very roughly) adapted it:
My demo

I'm sure there's an easy answer to this one, but is there a way to have the 'books' menu already opened and collapsed when the page is first loaded? I assumed it would be a matter of changing 'hidden' to 'visible' in the JavaScript file, but that doesn't seem to work.

JavaScript file
CSS file

Helvetica is my bitch.
System: 27" iMac i7, 2TB, 8GB RAM, Mac OS X Snow Leopard
  quote
adamb
Formerly “adambrennan”
 
Join Date: Oct 2005
Location: Northern Ireland
 
2007-05-19, 20:59

Attempt number one

I hope this helps, but I have no idea how cross browser compatible it is. It appears to work in Firefox and Safari, I'm not sure about other browsers.

The javascript and css are both internal. You could split these into external files easily enough. I just included it internally for convenience.

I have commented the little code there is. I find that logically a lot easier to understand than the example you modified. It's not as elegant a solution, but I'm somewhat of a javascript novice myself. I hope you can salvage something from it.
  quote
Is it 1981?
Senior Member
 
Join Date: Mar 2005
Location: Londontown
 
2007-05-21, 10:04

Thanks for that; although I've managed to modify the script so that it produces the effect I'm looking for.

Although there's a new problem - I've put together another demo page; where the menu options '99 and '00 (in the grey squares) are clickable. The list of 'Rick's birthday', 'Truck Nine' and 'The Blue Rooms' are all inside a <div id="ninetynine">, which is showing when the page is loaded.

If I click on the '00 to hide the <div id="ninetynine"> and to show a <div="twothousand">, this menu comes up unformatted. As far as I can see from the CSS, it should have the same formatting as the <div id="ninetynine">? Unless I've made a monumentally stupid mistake?

Demo page, with all CSS and JavaScript code internally in the source code
(Apologies for the awful formatting of the page + code!)

Helvetica is my bitch.
System: 27" iMac i7, 2TB, 8GB RAM, Mac OS X Snow Leopard
  quote
ast3r3x
25 chars of wasted space.
 
Join Date: May 2004
Send a message via AIM to ast3r3x  
2007-05-21, 18:43

I'll make my own later tonight if I have time, but I'd recommend using the accordion effect used by moo.fx.
  quote
Is it 1981?
Senior Member
 
Join Date: Mar 2005
Location: Londontown
 
2007-05-22, 06:13

Thanks for the link ast3r3x. I'll have a play around with that later on and see what it's like.

I've managed to solve my previous problem, but of course every solution brings with it a new problem. It shouldn't be too hard to spot - when the '00 menu is clicked on and is brought up, why does it appear all the way to the left of the screen and not in place of the '99 menu? As far as I know, there isn't a float: left thingy (technical terms, I know)
Demo page

I'm a complete and utter novice at this. I do appreciate all your help, folks.

Helvetica is my bitch.
System: 27" iMac i7, 2TB, 8GB RAM, Mac OS X Snow Leopard
  quote
Dominik
New Member
 
Join Date: Feb 2006
Location: Antarctica
 
2007-05-22, 15:32

Hmm... I don't see any styles being applied to '00. The output ist just wrong. Not a CSS problem from my point of view.
Are you planning on using a CMS or do you want to hard code the navigation?
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools

« Previous Thread | Next Thread »

All times are GMT -5. The time now is 03:28.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova