Creating a progress bar that includes hyperlinks: A step-by-step guide

Question

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that this approach is not acceptable and instead, I must adopt a "box" system.

The new requirement entails having 9 boxes arranged in a line, with each box labeled accordingly. This allows users to easily navigate back to a specific page if they need to make changes. While exploring options to fulfill this criteria, I experimented with using a navigation bar at the top as it already exists in the form of an unordered list with invisible bullets.

However, further adjustments are necessary as the current design does not meet the required specifications. Additionally, I aim to enhance user experience by ensuring that once a section is completed, it turns purple while the remaining sections remain gray to signify progress.

html css progress-bar

Answer 1

Answer №1

Why bother with a progress bar when you can simply style the selected item?

All you need to do is apply a class to the chosen item and then adjust the styling for everything that follows:

li {
    background:#aff; /* Represents completion. */
}

li.selected ~ li {
    background:#f5f5f5; /* Indicates not yet reached. */
}

li.selected {
    background:#5a0; /* Signifies selection. */
}

Start by assigning the current class to your first li.

Check out this example on JSFiddle: http://jsfiddle.net/KkQb3/1/

If you want to switch back to a previous item, create a new class:

li {
    background:#aff; /* This is the "already done" colour. */
}

li.selected ~ li {
    background:#f5f5f5; /* This is the "not yet reached" colour. */
}

li.selected {
    /* The "selected" colour no longer applies. */
}

li.current {
    background:#5ae; /* This is the new "selected" colour. */
}

New JSFiddle link: http://jsfiddle.net/KkQb3/2/ (You might consider renaming "selected" in this scenario.)

Answer 2

Why bother with a progress bar when you can simply style the selected item?

All you need to do is apply a class to the chosen item and then adjust the styling for everything that follows:

li {
    background:#aff; /* Represents completion. */
}

li.selected ~ li {
    background:#f5f5f5; /* Indicates not yet reached. */
}

li.selected {
    background:#5a0; /* Signifies selection. */
}

Start by assigning the current class to your first li.

Check out this example on JSFiddle: http://jsfiddle.net/KkQb3/1/

If you want to switch back to a previous item, create a new class:

li {
    background:#aff; /* This is the "already done" colour. */
}

li.selected ~ li {
    background:#f5f5f5; /* This is the "not yet reached" colour. */
}

li.selected {
    /* The "selected" colour no longer applies. */
}

li.current {
    background:#5ae; /* This is the new "selected" colour. */
}

New JSFiddle link: http://jsfiddle.net/KkQb3/2/ (You might consider renaming "selected" in this scenario.)

Creating a progress bar that includes hyperlinks: A step-by-step guide

Answer №1

Similar questions

What is the best way to set the width of a w2grid to 100%

Fluid imitation pillars with a decorative outer edge

Is there a way to create a multi-page website simulation using jQuery?

Executing a script for every row in a table using Python and Selenium

What is the best way to retrieve the value of a select tag in Vue JS?

Generating dynamic input field values using jQuery in a CodeIgniter PHP framework application

"Utilizing a flexible grid system in Bootstrap to create 2 or

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

Can CSS achieve Turing completeness?

ensured maximum height of a div attached to the bottom

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to turn off Emmet's CSS Abbreviations feature in Sublime Text 2?

Silver button seems blue on iPhone

Swapping out a code snippet within an HTML document using JavaScript

Can someone please provide me with a Javascript code snippet that accomplishes the same function

What is the smoothest way to animate price changes as you scroll?

Problem with Submitting Form using Search Bar

Changing the text color of an active button in Bootstrap

Creating a PDF in Python from an HTML / CSS file with images: A step-by-step guide

Record client's real-time decision in the database