Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

css menu by alphabetic categories?

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

New User

10+ Year Member

joined:Mar 8, 2004
posts:3
votes: 0


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]

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

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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 ...
12:26 am on June 21, 2008 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


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.
4:44 am on June 21, 2008 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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.

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

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


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.