The Perfect Css Menu, Sweeeeet Options

[linux_lover]

Just had to post this:

Suckerfish dropdown menu

A nice bit of scripting... standards complient, works in everything (well not sure about ancient browsers but who cares) CSS menu. (drum roll).

Shame about the necessary bit of JS for IE, but thats bills fault.

[qwerty]

I'm rather fond of http://www.seoconsultants.com/css/menus/horizontal/ and
http://www.seoconsultants.com/css/menus/vertical/

I think they're both based on the suckerfish menus.

[pageoneresults]

I think they're both based on the suckerfish menus.

Hello qwerty, thanks for the compliments on the menus. Claire thanks you too!

Actually when I first set out to develop these menus, the Suckerfish solution was a starting point. Then Claire from Tanfa introduced me to the Peterned .htc file which replaced the Suckerfish solution I had developed.

We are also in the process of developing another version that uses the IE7 javascript solution. We want to make multiple menus using various solutions and allow our visitors to make a choice based on their environment and level of compatibility.

Unfortunately we are finding out that the popouts do not work in IE5.x. In our environment, that doesn't present too much of a problem because all of our sub-directories have an index page which lists all pages within that section. So, no popout but, they can click on the link and bring up a static page with what looks like a search engine results page with a title and description for each page in that section.

We've got more in the works so keep an eye on the above space.

[eragon]

The guys over at Milonic have a pretty cool menu with lots of options. The transition effects, sadly, only work in IE though.

[linux_lover]

Actually when I first set out to develop these menus, the Suckerfish solution was a starting point. Then Claire from Tanfa introduced me to the Peterned .htc file which replaced the Suckerfish solution I had developed.

Unfortunately we are finding out that the popouts do not work in IE5.x. In our environment, that doesn't present too much of a problem because all of our sub-directories have an index page which lists all pages within that section. So, no popout but, they can click on the link and bring up a static page with what looks like a search engine results page with a title and description for each page in that section.

Thats why the suckerfish one doesnt use .htc file - as it wont work with IE5, their Javascript function cures it, plus its a lot less code. I went along the same path before finding someone had already done one for me....

This post has been edited by linux_lover: Jan 5 2005, 10:22 AM

[Kev]

Dunno about 'perfect' but this one is lovely to look at and use:

http://www.aleto.ch/

[Randy]

Isn't CSS fun? (IMG:http://www.highrankings.com/forum/style_emoticons/default/wink.gif)

Lately I've taken to incorporating a CSS with a bit of JS and even PHP to create a menu/sub-menu system that keeps everyone rightly focused on the section of a larger site that they're on. Sort of like a breadcrumb trail, without the breadcrumbs. Instead the nav blocks reflect where you're at in a general way.

I've decided to use both a top nav that is horizontal, with main link "buttons" at the top and a sub-menu directly below that, which uses Javascript to make the sub-menu's appear. I'm also including a left nav menu that doesn't depend upon JS at all, so as to be search engine and accessibility compliant.

The little PHP bit to expand the appropriate menus is pretty slick, if I do say so myself. Laughably easy to do once you get your head around the concept. As soon as I get it all done and working on a couple of real live sites I'll probably publish the code so that others can use it if they want.

Since it incorporates PHP, it uses a few includes as you might imagine, but that makes it easy to change menus of each sub-section if you need to in the future by changing one file instead of 200. Best of all worlds for me. I can change the whole thing for thousands of pages by changing just a few files!

[torka]

As soon as I get it all done and working on a couple of real live sites I'll probably publish the code so that others can use it if they want.

Oooh, I'll be sitting on the edge of my seat waiting for this! (Really!) That would exactly fill the bill for something I've been wanting to do on a couple of my sites.

Do we have a pleading-puppy-dog-eyes smilie around here somewhere... toddles off to look... Well, nothing exactly right, but how about these (IMG:http://www.highrankings.com/forum/style_emoticons/default/notworthy.gif) :shy:

--Torka (IMG:http://www.highrankings.com/forum/style_emoticons/default/mf_prop.gif)

[Randy]

maybe something like this Torka? (IMG:http://www.highrankings.com/forum/style_emoticons/default/wink.gif)

Attached image(s)

 

[chrishirst]

I've used ASP and CSS to do similar, in a collapsible menu/sub-menu/sub-sub-menu (and deeper if you want to get really silly).
It will get converted to PHP at some point. (and both versions published)

www.cands.dnsalias.com/ no javascript was injured in the making of this menu (IMG:http://www.highrankings.com/forum/style_emoticons/default/biggrin.gif) (Though it could easily be added to the top level )


playing with a ASP/CSS tabbed menu as well that will get the code published

[sweepthelegnate]

those menus are pretty useful, saw them a while back on a list apart. The seems to have inspired a lot of the menus out there...

Randy - those menus you're working on sound great.


nathan

[McFox]

I don't think you can discuss CSS menus without including the examples at Listamatic

Some nice designs.

[sweepthelegnate]

here's another set...not as many as those listed above, but could be a good starting point for some. Elusion menus


nathan

[eragon]

I don't think you can discuss CSS menus without including the examples at Listamatic

Some nice designs.

It's Christmas all over again! (IMG:http://www.highrankings.com/forum/style_emoticons/default/clapping.gif) Thanks for adding, McFox.