"Nav Test"
Bootstrap 4.1.1 Snippet by ingles

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <div class="container-fluid bg-dark"> <div class="container"> <div class="row text-white py-4" id="sub-nav"> <ul class="first"> <li class="active"> <span>Range 1</span> <ul class="second"> <li class="active"> <span>SubRange 1.1</span> <ul class="third"> <li>Content 1.1</li> </ul> </li> <li> <span>SubRange 1.2</span> <ul class="third"> <li>Content 1.2</li> </ul> </li> <li> <span>SubRange 1.3</span> <ul class="third"> <li>Content 1.3</li> </ul> </li> <li class="active"> <span>SubRange 1.1</span> <ul class="third"> <li>Content 1.1</li> </ul> </li> <li> <span>SubRange 1.2</span> <ul class="third"> <li>Content 1.2</li> </ul> </li> <li> <span>SubRange 1.3</span> <ul class="third"> <li>Content 1.3</li> </ul> </li> <li class="active"> <span>SubRange 1.1</span> <ul class="third"> <li>Content 1.1</li> </ul> </li> <li> <span>SubRange 1.2</span> <ul class="third"> <li>Content 1.2</li> </ul> </li> <li> <span>SubRange 1.3</span> <ul class="third"> <li>Content 1.3</li> </ul> </li> </ul> </li> <li> <span>Range 2</span> <ul class="second"> <li> <span>SubRange 2.1</span> <ul class="third"> <li>Content 2.1</li> </ul> </li> <li> <span>SubRange 2.2</span> <ul class="third"> <li>Content 2.2</li> </ul> </li> <li> <span>SubRange 2.3</span> <ul class="third"> <li>Content 2.3</li> </ul> </li> </ul> </li> <li> <span>Range 3</span> <ul class="second"> <li> <span>SubRange 3.1</span> <ul class="third"> <li>Content 3.1</li> </ul> </li> <li> <span>SubRange 3.2</span> <ul class="third"> <li>Content 3.2</li> </ul> </li> <li> <span>SubRange 3.3</span> <ul class="third"> <li>Content 3.3</li> </ul> </li> </ul> </li> <li> <span>Range 4</span> <ul class="second"> <li> <span>SubRange 4.1</span> <ul class="third"> <li>Content 4.1</li> </ul> </li> <li> <span>SubRange 4.2</span> <ul class="third"> <li>Content 4.2</li> </ul> </li> <li> <span>SubRange 4.3</span> <ul class="third"> <li>Content 4.3</li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </body> </html>
.first, .second, .third { list-style: none; } .first span, .second span { position: relative; display: inline-block; width: 100%; } .first { width: 33.33333333333333%; position: relative; } .second { position: absolute; visibility: hidden; top: 0; left: 100%; width: 100%; } .third { position: absolute; visibility: hidden; top: 0; left: 100%; width: 100%; } .first li, .second li { cursor: pointer; } .third li { height: 100%; } .first li.active>ul, .second li.active>ul { visibility: visible; } .first>li.active, .second>li.active { border-bottom: 2px dotted white; } .second li:hover .third li { border-bottom: 2px dotted white; }
$('.first > li span').click(function() { $('.first > li, .first > li .second > li').removeClass('active'); $(this).parents('li').addClass('active'); $(this).parent().find('ul li:first-child').addClass('active'); }); $('.first li .second > li span').click(function() { $(this).parents('li').addClass('active'); });

Related: See More

Paper Bootstrap Wizard

Questions / Comments: