JSFiddle - React, Tailwind, and code Playground
by Aleksandar Urošević
HTML
<div id="topnav" class="topnav"></div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
body {
font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
}
#topnav {
clear: both;
}
/* Top Navigation */
.topnav {
width: 100%;
height: 38px;
margin: 0;
padding: 0;
font-size: 13px;
background: #505050;
background: linear-gradient(to bottom, #505050 0%, #2e2e2e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #505050), color-stop(1, #2e2e2e));
background: -webkit-linear-gradient(top, #505050 0%, #2e2e2e 100%);
background: -ms-linear-gradient(top, #505050, #2e2e2e);
background: -moz-linear-gradient(center top, #505050 0%, #2e2e2e 100%);
background: -o-linear-gradient(#2e2e2e, #505050);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#505050', endColorstr='#2e2e2e', GradientType=0);
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
/* Level 1 */
}
.topnav ul.menu {
text-align: center;
display: inline-block;
padding: 0;
margin: 0;
width: 100%;
height: 38px;
}
.topnav ul.menu li.item {
list-style: none;
display: inline-block;
/* Leve 2 */
}
.topnav ul.menu li.item > a {
text-transform: uppercase;
font-weight: 600;
color: #ffffff;
height: 20px;
display: inline-block;
text-decoration: none;
padding: 9px 20px;
}
.topnav ul.menu li.item a:hover {
background: #f4f4f4;
background: linear-gradient(to bottom, #f4f4f4 0%, #d2d2d2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f4f4), color-stop(1, #d2d2d2));
background: -webkit-linear-gradient(top, #f4f4f4 0%, #d2d2d2 100%);
background: -ms-linear-gradient(top, #f4f4f4, #d2d2d2);
background: -moz-linear-gradient(center top, #f4f4f4 0%, #d2d2d2 100%);
...
JavaScript
jQuery(document).ready(function($){
var menu = [];
var number = 5 + Math.floor(Math.random() * 5);
for (var i = 1; i <= number; i++) {
if ( Math.round(Math.random()) == 1 ) {
var submenu1 = [];
for ( var a = 1; a <= (4 + Math.floor(Math.random() * 5)); a++ ) {
if ( Math.round(Math.random()) == 1 ) {
var submenu2 = [];
for ( var b = 1; b <= (3 + Math.floor(Math.random() * 5)); b++ ) {
if ( Math.round(Math.random()) == 1 ) {
var submenu3 = [];
for ( var c = 1; c <= (3 + Math.floor(Math.random() * 4)); c++ ) {
if ( Math.round(Math.random()) == 1 ) {
var submenu4 = [];
for ( var d = 1; d <= (3 + Math.floor(Math.random() * 3)); d++ ) {
if ( Math.round(Math.random()) == 1 ) {
var submenu5 = [];
for ( var e = 1; e <= (3 + Math.floor(Math.random() * 2)); e++ ) {
if ( Math.round(Math.random()) == 1 ) {
var submenu6 = [];
for ( var f = 1; f <= (3 + Math.floor(Math.random() * 1)); f++ ) {
submenu6.push('<li class="item"><a href="#">Item '+f+'</a></li>');
}
parent6 = "parent";
subitems6 = '<ul class="submenu">'+submenu6.join('')+'</ul>';
} else {
parent6 = subitems6 = "";
}
submenu5.push('<li class="item"><a href="#">Item '+e+'</a>'+subitems6+'</li>');
}
parent5 = "parent";
subitems5 = '<ul class="submenu">'+submenu5.join('')+'</ul>';
} else {
parent5 = subitems5 = "";
}
submenu4.push('<li class="item '+parent5+'"><a href="#">Item '+d+'</a>'+subitems5+'</li>');
}
parent4 = "parent";
subitems4 = '<ul class="submenu">'+submenu4.join('')+'</ul>';
} else {
parent4 = subitems4 = "";
}
submenu3.push('<li class="item '+parent4+'"><a href="#">Item '+c+'</a>'+subitems4+'</li>');
}
parent3 =...