Welcome to WebmasterWorld Guest from 54.144.77.26

Forum Moderators: not2easy

Message Too Old, No Replies

css menu by alphabetic categories?

     

travelingone

2:30 pm on Jun 20, 2008 (gmt 0)

10+ Year Member



Looking for scripting examples of alphabetic menu similar to the one found at <snip>. Have thought using for a site I have that has a lot of content and categories and seeing if it would be feasible to organize this way via external css or tags somehow, or would be too time consuming.
Another option would be to have a flyout menu similar to what Amazon now uses.

[edited by: engine at 8:10 am (utc) on June 21, 2008]
[edit reason] no specific sites, thanks [/edit]

swa66

10:53 pm on Jun 20, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Since the one at the site you referenced is made using CSS, I guess the question answers itself: yes it is possible. I'm not sure what else you seek to learn ...

webfoo

12:26 am on Jun 21, 2008 (gmt 0)

5+ Year Member



Yes, it's possible, but is it feasible - that's what he wants to know. There'd have to be a whole lot of javascript going on, too.

swa66

4:44 am on Jun 21, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I think javacript might only be needed to fix the IE omissions (like only being able to do a hover on <a> tags.

Basically you have a <ul> with 26 <li>s, some hover background images in CSS, and some markup to make the act like buttons on a hover.

Next you either go the complex way where you upon hover could already change with content you display (and here IE6 hover on "<a>" only will hurt you big time), or you make 26 such pages, or you could consider ajax like technisque to change the content on the page by fetch more content from the server without reloading the entire page....

I really don't think it's hard to achieve, but you need to set what you need/want to achieve with the measures you're implementing.

appi2

10:23 am on Jun 21, 2008 (gmt 0)

5+ Year Member



Its a basic ul list for the alphabet the css is only for a:hover that shows a background image for each letter.
The actual flyout is AJAX (javascript that queries an xml file).
Had a play making a copy last night, but I went for JSON instead of xml.

As swa66 says it could be done pure css and html.
Suckerfish horizontal menu and a bit of tweeking and you could get the same effect.