Senior Member
Join Date: Mar 2005
Location: Londontown
|
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 |
Formerly “adambrennan”
Join Date: Oct 2005
Location: Northern Ireland
|
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 |
Senior Member
Join Date: Mar 2005
Location: Londontown
|
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 |
Senior Member
Join Date: Jan 2006
Location: Antwerp, Belgium
|
By the by, I think it's an absolutely beautiful interface.
|
quote |
Senior Member
Join Date: Mar 2005
Location: Londontown
|
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 |
Formerly “adambrennan”
Join Date: Oct 2005
Location: Northern Ireland
|
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 |
Senior Member
Join Date: Mar 2005
Location: Londontown
|
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 |
Senior Member
Join Date: Mar 2005
Location: Londontown
|
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 |
New Member
Join Date: Feb 2006
Location: Antarctica
|
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 |
|
Thread Tools | |