Develop Reference

How to display a multilevel dropdown using classes of carbon design system?

I want to implement a dropdown menu where hovering over a particular option from the menu opens another set of options, something like this (hovering over Option 3 opens up menu containing Option 4 and 5) -
I have been trying similar thing using carbon classes (taken reference from - https://the-carbon-components.netlify.app/?nav=dropdown and https://codepen.io/team/carbon/pen/wEGEoz) but I am not able to achieve it.
This is what my code looks like -
HTML -
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Choose an option</li>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="Option 1" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a></li>
<li data-option data-value="Option 2" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a></li>
<li data-option data-value="Option 3" class="bx--dropdown-item" id="openMenu"><a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
<ul class="bx--dropdown-list" id="customMenu" style="display:none;margin-left:75px;">
<li data-option data-value="Option 4" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a></li>
<li data-option data-value="Option 5" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS -
.bx--dropdown {
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
list-style: none;
display: block;
background-color: white;
border: none;
border-bottom: 1px solid #8C8c8c;
width: 100%;
height: 2.5rem;
cursor: pointer;
color: #171717;
outline: 2px solid transparent;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--dropdown-text {
display: block;
padding-left: 1rem;
padding-right: 2.625rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
}
.bx--dropdown-list {
background-color: white;
display: flex;
flex-direction: column;
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
width: 100%;
list-style: none;
position: absolute;
z-index: 1000;
max-height: 0;
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
overflow-x: auto;
overflow-y: auto;
}
.bx--dropdown-item {
transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity
70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms
cubic-bezier(0.2, 0, 0.38, 0.9);
opacity: 0;
visibility: inherit;
position: relative;
}
.bx--dropdown-link {
display: block;
outline: 2px solid transparent;
outline-offset: -2px;
height: 2.5rem;
color: #393939;
text-decoration: none;
font-weight: normal;
line-height: 1rem;
padding: 0.6875rem 0;
margin: 0 1rem;
border: 1px solid transparent;
border-top-color: #e0e0e0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bx--dropdown--open .bx--dropdown-list {
max-height: 15rem;
transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
.bx--dropdown--open .bx--dropdown-item {
opacity: 1;
}
Here .bx--dropdown--open class gets added to ul containing class bx--dropdwon after clicking on 'Choose an option' box, like -
<ul data-dropdown="" data-value="" class="bx--dropdown bx--dropdown--open" tabindex="0">
JS -
$("#openMenu").on("mouseover",function() {showNew();});
$("#openMenu").on("mouseout",function() {showOld();});
function showNew(evt) {
$("#customMenu").attr("style", "display:block;margin-left:75px;");
}
function showOld() {
$("#customMenu").attr("style", "display:none");
}
The problem is that on hovering over Option 3 a scrollbar appears within the dropdown menu and the options Option 4 and Option 5 show within the initial dropdown only -
I want it to appear out of that box in the same way as it is in the first example that I have given. I am unable to understand how to make it work even after spending a lot of time with it. Any help is appreciated.

I don't think you can make it with the sole use of carbon.
I combined carbon and bootstrap to achieve a top-nav with multi level dropdown sub-items.
https://the-carbon-components.netlify.app/component/ui-shell--default.html
https://bootstrap-menu.com/demos/multilevel.html
.dropdown-menu li {
position: relative;
}
.nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
padding-top: 7px;
}
.dropdown-menu>li:hover>.submenu {
display: block;
}
.dropdown-item {
background-color: #262626;
}
<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet" />
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<header class="bx--header">
<nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
<ul class="bx--header__menu-bar" aria-label="Platform Name">
<li class="bx--header__submenu" data-header-submenu>
<a class="bx--header__menu-item bx--header__menu-title" aria-haspopup="true" aria-expanded="false" tabindex="0"><strong> Main </strong>
<svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</a>
<ul class="bx--header__menu navbar-nav" aria-label="Sub1">
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 1 </strong>   >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub1" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 1 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub2" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 2 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 3 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 2 </strong>   >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 4 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub5" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 5 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 3 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 4 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>

How to close all other open sub-menu when other parent menu item is clicked?

I am using this code LINK.
When i click on Parent Menu like Services then sub-menu of services menu will be open but when i click on other menu then other sub menu will also open.
I want when i click on other sub menu then previous sub-menu will be close.
Kindly provide me solution for this.
Thank you
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>

Basically you need to know the concept of not() in jQuery, so that you can hide the element except clicked one. Here is the working example.
$('#menu-content').children("li").on('click', function(){
$("li[data-toggle='collapse']").not(this).addClass('collapsed');
$("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
//alert('clicked');
});
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>

Another version of code which works for me.
$(".submenu").not('.submenu-child').click(function()
{
$(".submenu").not(this).find(".collapse").collapse('hide');
});
Where submenu class is applied to parent menu and submenu-child class applied to submenus.

Custom menu using jQuery and CSS

I'm trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it's own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here's what I have so far:
$(".primary-nav .box").click(function(e) {
e.preventDefault();
$('.primary-nav').addClass('hidden-xs-up')
$('.secondary-nav').removeClass('hidden-xs-up');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').addClass('hidden-xs-up');
$('.primary-nav').removeClass('hidden-xs-up');
});
.sidebar {
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav hidden-xs-up">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/fj4Lou7w/

Based on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
Use position absolute for the secondary navs.
Use a class and transition to make the slide animation.
Use a reference from your primary buttons to target the right secondary element.
$(".primary-nav .box").click(function(e) {
e.preventDefault();
var targ = $(this).attr('href');
$(targ).addClass('showsub');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').removeClass('showsub');
});
.sidebar {
position:relative;
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
overflow:hidden;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
.secondary-nav {
position:absolute;
z-index:10;
left:100%;
top:0;
width:100%;
background-color: #434a54;
transition:left .2s linear;
}
.secondary-nav.showsub {
left:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#sec1" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1
</a>
<a href="#sec2" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav" id="sec1">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
<div class="secondary-nav" id="sec2">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
</div>
</div>
</div>
</div>
</div>

it is not the best solution, but on hover you can hide, move,... elements in the DOM with CSS like:
[
body {
font-family: Arial;
padding: 40px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 60px;
}
ul.submenu {
opacity: 0;
position: absolute;
top: 0;
left: 120px;
transition: all 400ms ease-in-out;
}
ul li {
border-top: 1px solid white;
}
ul li a {
display: block;
background-color: #434a54;
text-align: center;
color: white;
text-decoration: none;
padding: 20px 0;
}
ul li:hover .submenu {
opacity: 1;
left: 61px;
}
<ul class="mainmenu">
<li>
Menu1
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu3
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu4
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
</ul>

Signup form with multiple steps?

I have few forms that I used to create advertisement for my client website. How do I disable other links until the user fill first form? Please look at my images.
This is the thing I want to achieve.
Here is my html code
<div class="col-md-12">
<div class="col-md-4">
<div class="post-new-ad-link">
Post free ad
</div>
<div class="other-links">
<ul>
<li>
<a href="#">
<i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i> Basic details</a>
</li>
<li>
<a href="#">
<i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i> Images</a>
</li>
<li>
<a href="#">
<i class="fa fa-money fa-lg fa-fw" aria-hidden="true"></i> Price</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-lg fa-fw" aria-hidden="true"></i> Location</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i> Contact and status</a>
</li>
</ul>
</div>
</div>
css
.post-new-ad-link {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
border-bottom: 0;
font-size: 1.7rem;
text-align: center;
background: #53bff7;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.post-new-ad-link a {
transition: all 0.5s ease;
color: #fff;
display: block;
padding: 50px;
}
.other-links {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.other-links ul {
list-style-type: none;
padding: 0;
}
.other-links li {
font-size: 1.5rem;
}
.other-links li a {
padding: 15px 0 15px 20px;
display: block;
color: #666666;
transition: all 0.5s ease;
}
.other-links li a:hover {
text-decoration: none;
background:#ddd;
}
Fiddle
Any jquery option or other one?

Pointer event :none should do the trick. I have modified your HTML and CSS file to achieve the same. You have to write your own logic under what event(completion), the next li should be enabled. At present i have written a logic to enable the second li on the click of first li. To enable the third li you should click second li....
Make sure to add data-disabled attribute to the <li> tag.
Refer the Fiddle

Bootstrap dropdown menu hidden by second panel body

I have a dropdown menu in a panel body with another panel body with content under it. When clicking the dropdown menu it is hidden under the second panel body. I have tried various z-index's and overflow:visible / auto etc but had no joy.
example here: https://jsfiddle.net/084wukwz/1/
html:
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h3 class="box-title"><i class="fa fa-fw fa-info-circle"></i> Heading</h3></a>
</div>
<p class="text-muted">Basic Info</p><br/>
<div id="collapseOne" class="panel-collapse collapse">
<p>Full Info</p>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 1</button>
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 2</button>
<button class="btn btn-info"><i class="fa fa-fw fa-eye"></i>button 3</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:inherit;overflow:visible;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 5</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<h3 class="box-title">Content</h3>
</div>
</div>
</div>
</div>
css:
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer {
color: inherit;
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
}
.hpanel.panel-collapse > .panel-heading,
.hpanel .hbuilt {
background: #fff;
border-color: #e4e5e7;
border: 1px solid #e4e5e7;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 20px;
position: relative;
}
.panel-body .panel-heading{
padding: 10px 0px;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}

Use position: absolute; for your dropdown-menu (and remove its other style attributes).
overflow has nothing to do with this issue. If in doubt, always have a look at the CSS Reference.
Updated fiddle