<nav class="navbar navbar-info" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav main-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown One</a>
<ul class="dropdown-menu animation slideDownIn">
<li>
<div class="col-xs-6 first-col-domains">
<div class="box top-domains-div">
<div class="icon-container"><i class="fa fa-2x fa-calculator" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Link One</a>
-
<a href="#">Link Two</a>
</div>
<div class="clearfix"></div>
<div class="box middle-domains-div">
<div class="icon-container"><i class="fa fa-2x fa-area-chart" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Link One</a>
-
<a href="#">Link Two</a>
</div>
<div class="box bottom-domain-div">
<div class="icon-container"><i class="fa fa-2x fa-users" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<a href="#">Link One</a>
-
<a href="#">Link Two</a>
</div>
</div>
</li>
<li>
<div class="col-xs-3 box">
<div class="second-col-div">
<h3>List name</h3>
<ul class="list-unstyled">
<li><a href="">link One</a></li>
<li><a href="">link Two</a></li>
<li><a href="">link Three</a></li>
<li><a href="">link Four</a></li>
<li><a href="">link Five</a></li>
<li><a href="">link Six</a></li>
<li><a href="">link Seven</a></li>
<li><a href="">link Eight</a></li>
</ul>
</div>
</div>
</li>
<li>
<div class="col-xs-3 box">
<div class="top-third-col-div">
<h3>Heading</h3>
<ul>
<li><a href="">link one</a></li>
<li><a href="">link two</a></li>
<li><a href="">link three</a></li>
<li><a href="">link four</a></li>
<li><a href="">link five</a></li>
</ul>
</div>
<div class="bottom-third-col-div">
<ul>
<li><a href="">link one</a></li>
<li><a href="">link two</a></li>
<li><a href="">link three</a></li>
</ul>
<button class="btn btn-primary">Primary Button</button>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Two</a>
<ul class="dropdown-menu animation slideUpIn second-example">
<li>
<div class="col-xs-6 first-col-domains">
<div class="box top-domains-div">
<div class="icon-container"><i class="fa fa-5x fa-desktop" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
</div>
</li>
<li>
<div class="col-xs-6 first-col-domains">
<div class="box top-domains-div">
<div class="icon-container"><i class="fa fa-5x fa-camera" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
</div>
</li>
<li>
<div class="col-xs-6 first-col-domains">
<div class="box top-domains-div">
<div class="icon-container"><i class="fa fa-5x fa-university" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
</div>
</li>
<li>
<div class="col-xs-6 first-col-domains">
<div class="box top-domains-div">
<div class="icon-container"><i class="fa fa-5x fa-industry" aria-hidden="true"></i></div>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Three</a>
<ul class="dropdown-menu animation floating dropdown-centered">
<li>
<div class="col-xs-4 first-col-domains">
<h3>List name</h3>
<ul class="list-unstyled">
<li><a href="">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</a></li>
<li><a href="">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</a></li>
</ul>
</div>
</li>
<li>
<div class="col-xs-4">
<h3>List name</h3>
<ul class="list-unstyled">
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link seven</li>
<li>link eight</li>
<li>link nine</li>
<li>link ten</li>
</ul>
</div>
</li>
<li>
<div class="col-xs-2">
<h3>Headline</h3>
<ul>
<li><a href="">link one</a></li>
<li><a href="">link two</a></li>
<li><a href="">link three</a></li>
<li><a href="">link four</a></li>
<li><a href="">link five</a></li>
<li><a href="">link six</a></li>
<li><a href="">link seven</a></li>
<li><a href="">link eight</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
$blue-color:rgb(0,191,227);
body{background-color:#fff;}
.parent{
position: relative;
}
.navbar-info{
background-color:#00bfe3;
.navbar-brand{
color:#fff;
}
.dropdown{
a{
@extend .navbar-brand;
}
&:hover{
a{
background-color: #f4f4f4;
color:#00bfe3;
}
}
}
}
.child{
position: absolute;
}
.child li div{
display: inline-block;
}
ul{
list-style-type: disc;
}
.dropdown-menu{
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-bottom:6px solid $blue-color;
border-radius: 0;
// -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.375);
// box-shadow: 0 6px 12px rgba(0,0,0,.375);
width: 800px;
h3{
margin:0;
font-size:15px;
font-weight:normal;
}
&:before{
position: absolute;
top: -19px;
left: 34px;
display: inline-block;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
border-left: 20px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
&:after{
position: absolute;
top: -18px;
left: 35px;
display: inline-block;
border-right: 19px solid transparent;
border-bottom: 19px solid #ffffff;
border-left: 19px solid transparent;
content: '';
}
ul{
margin-top:20px;
}
}
.navbar-nav > li > .dropdown-menu{
margin-top:15px;
}
.second-example{
font-size:12px;
.icon-container{
padding:60px;
display:block;
}
h3{
position:relative;
display:inline-block;
margin-bottom:10px;
font-size:20px;
&:after{
content:"";
position:absolute;
width:60%;
border-bottom:3px solid $blue-color;
bottom:0;
left:0;
top:25px;
}
}
}
.btn-primary{background-color:$blue-color;}
//////////////////////////////////
.first-col-domains{
.box{
border-top: 1px solid rgba(0, 0, 0, 0.2);
clear: both;
padding: 20px 10px;
position:relative;
&:first-child{border-top:none;}
.icon-container{
width:65px;
height:65px;
border-radius:50%;
line-height:65px;
background-color:$blue-color;
color:#fff;
text-align:center;
float:left;
margin:0 30px 0 0;
position:relative;
i{
left:50%;
top:50%;
transform:translate(-50%, -50%);
position:absolute;
}
}
}
}
.box{
padding:20px 10px;
.top-third-col-div{
border-bottom:1px dotted gray;
padding-bottom:20px;
}
.bottom-third-col-div{
.btn{
margin-top:10px;
}
}
ul{
padding-left:12px;
li{
a{
color:#777;
text-transform:uppercase;
}
}
}
}
// .dropdown-centered{
// left:-100px;
// }
.animation{
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideDownIn {
0% {
-webkit-transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(0);
}
0% {
-webkit-transform: translateY(-20);
}
}
@keyframes slideDownIn {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
0% {
transform: translateY(-20px);
}
}
.slideDownIn {
-webkit-animation-name: slideDownIn;
animation-name: slideDownIn;
}
@-webkit-keyframes slideUpIn {
0% {
-webkit-transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0);
}
0% {
-webkit-transform: translateY(20px);
}
}
@keyframes slideUpIn {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
0% {
transform: translateY(20px);
}
}
.slideUpIn {
-webkit-animation-name: slideUpIn;
animation-name: slideUpIn;
}
.floating{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(1%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(1%);
}
100% {
-webkit-transform: translateY(0%);
}
}
View Compiled
