JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="dks-navigation navbar navbar-default yamm" role="navigation">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="navbar-header">
					<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="navbar-collapse-1">
					<ul class="nav navbar-nav navbar-left">
						<!-- Start the List -->
						<li>
							<a href="#">item 01</a>
						</li>
						<li>
							<a href="#">item 02</a>
						</li>
						<li>
							<a href="#">item 03</a>
						</li>
						<li class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle">item 04<b class="caret"></b></a>
							<div class="dropdown-menu">
								<div class="yamm-content">
									<ul class="row">
										<li><a href="#">sub item 01</a></li>
										<li><a href="#">sub item 02</a></li>
										<li><a href="#">sub item 03</a></li>
										<li><a href="#">sub item 04</a></li>
										<li><a href="#">sub item 05</a></li>
										<li><a href="#">sub item 06</a></li>
										<li><a href="#">sub item 07</a></li>
									</ul>
								</div>
								<div class="bottom-nav-link">
									<ul class="">
										<li><a href="#">Our daily benefits</a></li>
									</ul>
								</div>
							</div>
						</li>
						<li class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle">item 05 is a long one<b class="caret"></b></a>
							<div class="dropdown-menu">
								<div class="yamm-content">
									<ul class="row">
										<li><a href="#">sub item...

CSS

/* MENU
-------------------------------------------------- */
.dks-navigation ul.navbar-nav {
    width: 900px;
}

.dropdown .caret {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid;
    display: inline-block;
    height: 0;
    margin-left: 7px;
    vertical-align: middle;
    width: 0;
}
/*!
 * Yamm!3
 * Yet another megamenu for Bootstrap 3
 * 
 * http://geedmo.github.com/yamm3
 */
.yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown {
    position: static;
}

.yamm .container {
    position: relative;
}

.yamm .dropdown-menu {
    left: auto;
}

.yamm .nav.navbar-right .dropdown-menu {
    left: auto;
    right: 0;
}

.yamm .yamm-content {
    padding: 5px 5px;
}

    .yamm .yamm-content ul {
        padding-left: 10px;
    }

.yamm .dropdown.yamm-fw .dropdown-menu {
    left: 0;
    right: 0;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.176);
    padding: 12px 5px;
}

.navbar-nav > li > .dropdown-menu {
    background-color: #fafeff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 0px;
    margin-top: 0;
    /* max-width: 900px;
    min-width: 500px; */
}

.list-unstyled, .list-unstyled ul {
    line-height: 2em;
    min-width: 185px;
}

    .list-unstyled, .list-unstyled ul li a,
    .bottom-nav-link a {
        font-size: 13px;
    }

    .list-unstyled a,
    .list-unstyled a:link,
        .list-unstyled a:visited {
            color: #545454;
        }

    .list-unstyled a:hover,
            .list-unstyled a:active {
                color: #727373;
                text-decoration: underline;
            }
    
.bottom-nav-link ul {
        padding-left: 5px;
        padding-top: 6px;
    }

.bottom-nav-link a {
}

    .bottom-nav-link a,
    .bottom-nav-link a:link,
    .bottom-nav-link a:visited {
        color: #ff7e00;
    }


.navbar-default {
    background-color: #E9EEF2;
    border-color: transparent;
}

   ...

JavaScript

$(document).ready(function () {
    
 //Menu: if dropdown insert html code for menu active border
    $('.navbar-nav > li').one('click', function () {
        var $this = $(this);
        if (!$this.hasClass('open')) {
            $this.append('<span class="active-nav-border"></span>');

        }

        var pos = $(".navbar-default .navbar-nav > .open > a").width();
        jQuery("span.active-nav-border").css({
            width: pos,
            display: 'block'
        });

    });
    
});