Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="top_nav">
        <div class="nav_menu ">
            <div class="navbar navbar-default navbar-static-top">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Logo</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown menu-large sys-menu" id="0010">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Системное меню<b class="caret"></b></a>
                            <ul class="dropdown-menu megamenu row">
                                <li class="col-sm-2 level-1">
                                    <ul class="level-1">
                                    </ul>
                                </li>
                                <li class="col-sm-2 level-2">
                                    <ul class="level-2">
                                    </ul>
                                </li>
                                <li class="col-sm-2 level-3">
                                    <ul>
                                        <li class="dropdown-header">Input groups</li>
                                        <li><a href="#">Basic example</a></li>
                                        <li><a href="#">Sizing</a></li>
                                        <li><a href="#">Checkboxes and radio addons</a></li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">Navs</li>
                                        <li><a href="#">Tabs</a></li>
                                        <li><a href="#">Pills</a></li>
                                        <li><a href="#">Justified</a></li>
  ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.navbar-default{
    color: #fff;
    background-color: #ccc6c6;
    border-color: #aca1a2;
}
.navbar-default .navbar-nav > li > a{
    color:#000000;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
    color:#fff;
}
.menu-large {
    position: static !important;
}
.megamenu{
    padding: 20px 0px;
    width:100%;
}
.megamenu> li > ul {
    padding: 0;
    margin: 0;
}
.megamenu> li > ul > li {
    list-style: none;
}
.megamenu> li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    cursor: not-allowed;
}
.megamenu.dropdown-header {
    color: #428bca;
    font-size: 18px;
}

.dropdown-menu.megamenu.row {
    margin-left: 0;
}

JavaScript

$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
//build menu


var link = function findAllChildren (number) {
        var childs = {};
        var items = {};
        for (i = 0; i < data.length; i++) {
            var item = data[i];
            var parentid = item["PARENT"];
            var url = item ["LINK"];
            var label = item ["NAME"];
            var id = item["CID"];
            if (parentid == number) {
                items[id] = {parentid:parentid, id:id, url:url, label:label};
                childs[id] = items[id];
            }
        }
        return childs;
    }


    var buildA = function (parent, items) {
        $.each(items, function () {
            if (this.label) {
                var a = $("<li id='"+ this.id +"' class='" + "specify" + "'>" + "<a href='"+ "#" +"' id='"+ this.id +"' class='" + "specify" + "'>" + this.label + "</a></li>");
                a.appendTo(parent);
            }
        })
    };

		var buildA = function (parent, items) {
        $.each(items, function () {
            if (this.label) {
                var a = $("<li id='"+ this.id +"' class='" + "specify" + "'>" + "<a href='"+ "#" +"' id='"+ this.id +"' class='" + "specify" + "'>" + this.label + "</a></li>");
                a.appendTo(parent);
            }
        })
    };

});

$("a.dropdown-toggle").click (function (a) {
	$("li.dropdown.menu-large").toggleClass('open');
});

$('ul.dropdown-menu.megamenu.row').click(function(e) {
		$(this).toggleClass('open');
    e.stopPropagation();
});