https://github.com/andersondias/css-step-menu

A CSS Step Menu implementation based on Code Lindley CSS Step Menu implementation
https://github.com/andersondias/css-step-menu

Last synced: 3 months ago
JSON representation

A CSS Step Menu implementation based on Code Lindley CSS Step Menu implementation

• Host: GitHub
• URL: https://github.com/andersondias/css-step-menu
• Owner: andersondias
• Created: 2010-06-01T15:35:28.000Z (about 15 years ago)
• Default Branch: master
• Last Pushed: 2010-06-01T15:35:58.000Z (about 15 years ago)
• Last Synced: 2025-03-29T15:32:42.659Z (3 months ago)
• Homepage:
• Size: 93.8 KB
• Stars: 17
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README

Awesome Lists containing this project

README

        
CSS Step Menu

=============

What is it?

-----------

A basic step menu implementation using CSS, based on Code Lindley CSS Step Menu implementation (http://codylindley.com/blogstuff/css/stepmenu/)

CSS Step Menu gives you 4 states for steps menu design:

 . Not visited

 . Current step

 . Last done

 . Done

And gives you 4 options of steps size:

 . Five steps - divide li items into 5 steps (
)

 . Four steps - divide li items into 4 steps (
)

 . Three steps - divide li items into 3 steps (
)

 . Two steps - divide li items into 2 steps (
)


How to use it?

--------------

CSS Step Menu is based on an Unordened List (ul) to create steps menu.

Add the steps.css to your page adding to your pages header something like:

  

And at your ul element that will be a steped navigation you should add a class: stepNavigation and set the number of steps using classes like: fiveStep, fourStep, etc.

List item elements (li) inside of create ul should declare the step state using classes. Available steps states options are: current, done, lastDone.

Empty class li will set step like not visited.

DOM structure

-------------

. Unordened list (ul)

  . ul element should have the class stepNavigation to declare that it is a steped menu;

  . ul element should declare steps quantity using classes like twoStep, threeStep, fourStep and fiveStep (defaults values).

. List items (li)

  . Not visited step is the default;

  . Current step - class='current';

  . Last done step - class='lastDone';

  . Done step - class='done';

  . Last step of the list should have a class='lastStep'.

  . em element describes step's title

  . span element describes step's description

Code sample

-----------

Four steps menu sample:



    
Step 1: Done stepEt nequ a quam turpis duisi

    
Step 2: Last done stepEt nequ a quam turpis duisi

    
Step 3: Current stepEt nequ a quam turpis duisi

    
Step 4: Not visited stepEt nequ a quam turpis duisi