CSS Step Menu
22 May 07
| Permanent Link | Add Comments
I recently worked on a web application that required a step menu (AKA wizard menu). This menu has a varying amount of steps, dependent upon the type of user accessing the application. Because of that requirement, I needed to write a CSS menu that could easily be changed from 5 steps to 4, 3, or 2 steps. Since the web is full of CSS menus, I thought one of this sort would be rather easy to find. I was wrong. I never really found a good example of one. So, for those of you who have looked and come up short, here’s an example.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
That’s pretty neat Cody. Good job.
Very promissing share mate :)
Great work!
Well, how come that you provide fourteen times the same ID? It seems, the ID has no work to do otherwise the page wouldn’t work.
Please forgive me for my blindness, but I am failing to see how this works.
Can you please show a practical example of its usage.
Thank
Nice work indeed! I can see this technique coming in handy for me some day. Thanks for sharing!
Nice work man.
A just noticed one thing. From the semantic point of view, it would be perhaps better to use ol insted of ul. I consider the steps to be certainly in some order …
Is there a reason why you dont have an rss feed? would be really nice !
greatings from germany,
philipp
@Jens Grochtdreis – The menus are only an example. Only one menu at a time would appear on a page. Thus, the use of ID’s makes sense.
@Cody: Your example does not validate. It is illegal to use an id more than once.
@Timo – Like I just told Jens, its an example. The real use of this menu only included one menu. Which means that there is only one ID on the page.
You mean like this;
http://ajaxwidgets.com/AllControlsSamples/WizardControl.aspx
;)
.t
Very nice design man thanks!
Made a simple wizard control with jquery, if you want it you can get it here.
http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/
As everyone else has said: very nice! One suggestion though… I’d mark up the current step differently. Perhaps with strong instead of em? The distinction in the markup would make it more semantically meaningful.
Hello, is it possible to take a look of the code ???
I have to implement something like that and I would like to understand your solution (in which way you populate it, where you save the text,..)
THANKS
There is possible to make this solution scalable (when enlarging text size by browser).
All you need to do:
1. Enlarge (continue) GIF`s to 200-300% vertically.
2. Instead of “background-image:â€? use “background: url(images/navLastDoneBtn.gif) right center no-repeat;”
3. Set size of blocks (li, a, em tags with width:150px and height:71px) in relative terms, for example width:6em and height:12em
I hope my post was useful.
Best regards.
Dude, that’s hot. It makes me want to come up with a project to use it for. :)
This is really nice. Would love to have the code for the working example (html and css) to see a live demo in action. I have no idea how to pull this off.