Vertical Progress Navigation

Developer
Chris Ota
Size
4,767 Kb
Views
20,240
  1. Vertical Progress Navigation Previews
  2. Vertical Progress Navigation HTML Codes
  3. Vertical Progress Navigation CSS Codes

How do I make an vertical progress navigation?

Problem: Create an alternative way for a user to track the steps needed to complete a task. The current horizontal navigation (not shown) on the dashboard takes up too much vertical space and does not do a good job guiding a user.. What is a vertical progress navigation? How do you make a vertical progress navigation? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.

Vertical Progress Navigation Previews
IQ Test

Vertical Progress Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Progress Navigation</title> <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="side-nav"><a href="http://www.dribbble.com/chrisota" title="Dribbble" rel="nofollow" class="logo"><i class="fa fa-dribbble"></i></a>
<ul>
<li class="selected"><a href="#" title="Add Shot"><i class="fa fa-cloud-upload"></i></a>
<ol>
<li class="completed"><i class="fa fa-check"></i> Upload</li>
<li class="current">Description</li>
<li>Publish</li>
<li>Share</li>
</ol>
</li>
<li><a href="#" title="Designers"><i class="fa fa-pencil"></i></a></li>
<li><a href="#" title="Teams"><i class="fa fa-group"></i></a></li>
<li><a href="#" title="Meet Ups"><i class="fa fa-comments"></i></a></li>
<li><a href="#" title="Jobs"><i class="fa fa-suitcase"></i></a></li>
<li><a href="#" title="Activity"><i class="fa fa-area-chart"></i><span class="new"></span></a></li>
<li><a href="http://www.dribbble.com/chrisota" title="Profile" rel="nofollow"><img src="http://www.otadesigns.com/images/chris-ota-profile.jpg"/></a></li>
</ul>
</nav>
</body>
</html>

Vertical Progress Navigation - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { color: #444246; background: #282828; background-image: -webkit-linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a), -webkit-linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a); background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a), linear-gradient(45deg, #2a2a2a 25%, transparent 25%, transparent 75%, #2a2a2a 75%, #2a2a2a); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.fa { font-size: 16px;
}
a { text-decoration: none; color: #47494c; -webkit-transition: color 0.3s ease; transition: color 0.3s ease;
}
.side-nav { margin: 60px auto; position: relative; width: 226px; height: 460px; background: #1f2022; box-shadow: 0 28px 30px -12px rgba(0, 0, 0, 0.6);
}
.side-nav .selected { background: #232426; position: relative;
}
.side-nav .selected > a { color: #efefef;
}
.side-nav ul > li { height: 48px; line-height: 45px; text-indent: 8px; position: relative; cursor: pointer;
}
.side-nav ul > li span:last-child { left: 48px; position: absolute; text-indent: 0;
}
.side-nav ul > li:hover a { color: #aaa;
}
.side-nav ul > li:last-child { bottom: 0; position: absolute; left: 0; width: 100%;
}
.side-nav ul > li:last-child img { margin: -4px 0 0 -2px; width: 36px; height: 36px; border-radius: 50%; display: inline-block; vertical-align: middle;
}
.logo { height: 48px; background: -webkit-linear-gradient(315deg, #f74d85 0%, #ca3063 100%); background: linear-gradient(135deg, #f74d85 0%, #ca3063 100%); display: block; width: inherit; position: relative; text-align: center; line-height: 52px; color: #fff;
}
.logo .fa { font-size: 24px; text-shadow: 0 4px 7px #81193c;
}
ol { background: #e7ecee; position: absolute; top: 0; right: 0; left: 48px; height: 412px; z-index: 2;
}
ol li { color: #aaa; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; font-weight: 700; min-height: 48px; border-top: 1px solid #cfcfcf; line-height: 46px; text-indent: 0; position: relative; margin: 0 20px 0 28px;
}
ol li.current { color: #444;
}
ol li.current:after { border-color: #ca3063;
}
ol li:before { content: ""; position: absolute; display: block; top: 2px; left: -16px; width: 4px; height: 4px; background: #cfcfcf; border-radius: 50%; box-shadow: 0 8px 0 #cfcfcf, 0 30px 0 #cfcfcf, 0 39px 0 #cfcfcf;
}
ol li:after { content: ""; position: absolute; display: block; border-radius: 50%; width: 8px; height: 8px; border: 2px solid #aaa; left: -18px; top: 19px;
}
ol li.completed:after { display: none;
}
ol li:first-child { border-top: 0;
}
ol li:first-child:before { top: 34px; box-shadow: 0 9px 0 #cfcfcf;
}
ol li:last-child:before { box-shadow: 0 9px 0 #cfcfcf;
}
ol li .fa { top: 18px; position: absolute; left: -20px; font-size: 12px; color: #3ec78c;
}
.new { width: 5px; height: 5px; border-radius: 50%; background: #f74d85; top: 12px; left: 34px !important;
}
Vertical Progress Navigation - Script Codes
Vertical Progress Navigation - Script Codes
Home Page Home
Developer Chris Ota
Username chrisota
Uploaded September 15, 2022
Rating 4.5
Size 4,767 Kb
Views 20,240
Do you need developer help for Vertical Progress Navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Ota (chrisota) Script Codes
Name
For Fun
Two Element Typeface
Navigation Experiment
Styled Checkbox
Random Wrist Watch
Slide-Up Folder Tabs
Mobile Table with Comparison View
Single Element Knob
Collapsable Menu
Sticky Nav Bar
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!