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

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

Choosing an option in react-select causes the page to unexpectedly shift

Implementing various style guidelines for distinct elements

Hovers and click effects for navigating through images

What is the best approach to styling a sub-child element within the first child using TailwindCSS?

Insert a new row into the table with a value that is taken from the input fields on the form

Display the scrollbar on a flexbox container instead of the entire browser window

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Mastering the art of obtaining XPaths through Selenium WebDriver

Only scroll the div if it is not within the visible window

Experiencing problems with the calling convention in JavaScript

What is the best approach to transfer information from the client side to a node

Particles.js fails to persist as I scroll down the HTML page

Identifying elements using xpath - Streamlined Xpath Techniques

Integrating foundation-sites with webpack, unable to apply styles

Optimizing CSS for Landscape Letter Print Alignment

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

Implementing a Custom CSS Theme in JavaFX

Transforming data from an HTML table into a MySQL database

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow