<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<body></body>
$(document).ready(function(){
var data = {
"images":['http://seeklogo.com/images/O/orange-logo-FEF8413207-seeklogo.com.gif',
'https://media.glassdoor.com/sqll/250877/orange-bowl-committee-squarelogo-1426153500267.png',
'http://eatlogos.com/food_and_drinks/png/vector_food_orange_logo.png',
'http://www.eatlogos.com/food_and_drinks/png/vector_orange_logo.png',
'http://www.eatlogos.com/food_and_drinks/png/vector_cut_orange_logo.png',
'http://www.gmkfreelogos.com/logos/O/img/Orange.gif',
'http://morportakal.net/logo.png'],
"nav":[
{
"name":"Home",
"href":"http://google.com",
"icon":"glyphicon glyphicon-home"
},
{
"name":"Video",
"href":"#",
"icon":"glyphicon glyphicon-film"
},
{
"name":"Music",
"href":"",
"icon":"glyphicon glyphicon-music"
},
{
"name":"Gallery",
"href":"",
"icon":"glyphicon glyphicon-picture"
},
{
"name":"User",
"href":"",
"icon":"glyphicon glyphicon-user"
},
{
"name":"Documents",
"href":"",
"icon":"glyphicon glyphicon-book"
},
{
"name":"Login",
"href":"",
"icon":"glyphicon glyphicon-log-in"
}
]};
var image = '';
function randomImage(){
var ran = Math.floor(Math.random() * data.images.length);
image = data.images[ran];
return image;
};
randomImage();
$('body').append($('<div/>',{'class':'navbar-wrapper'}));
$('.navbar-wrapper').append($('<div/>',{'class':'container','id':'navbar-wrapper'}));
$('#navbar-wrapper').append($('<nav/>',{'class':'navbar navbar-inverse navbar-fixed-top', 'role':'navigation'}));
$('nav').append($('<div/>', {'class':'container'}));
$('.container').append($('<div/>',{'class':'navbar-header','id':'navbar-header'}));
var img = new Image(35, 35);
img.src = image;
img.alt = 'logo';
img.id = 'network-icon';
img.className = 'img-rounded';
$(img).attr({'data-toggle':'tooltip','title':'Orange Network'})
$('#navbar-header').append($('<a/>',{'class':'navbar-brand','href':'',html:img}));
$('.navbar-header').append($('<button/>',{'id':'nav-button','type':'button','class':'navbar-toggle collapsed','data-toggle':'collapse','data-target':'#navbar','aria-expand':'false','aria-controls':'navbar'}));
$('#nav-button').append($('<span/>',{'class':'sr-only'}));
$('#nav-button').append($('<span/>',{'class':'icon-bar'}));
$('#nav-button').append($('<span/>',{'class':'icon-bar'}));
$('#nav-button').append($('<span/>',{'class':'icon-bar'}));
$('#nav-button').append($('<span/>',{'class':'icon-bar'}));
$('.container').append($('<div/>',{'id':'navbar','class':'collapse navbar-collapse'}));
$('#navbar').append($('<ul/>',{'class':'nav navbar-nav'}));
/**
* Rotate icon (home network)
*/
var image = $('.navbar-brand img ').attr('id');
$('#'+image).hover(function(){
$(this).css('transform','rotate(360deg)');
setTimeout(function () {
this.css({'transform': 'rotate(0deg)', 'transition': '0'});
setTimeout(function () {
this.css('transition', 'all 3s ease-in-out');
}.bind(this), 10);
}.bind($(this)), 3000);
});
for(var i in data.nav){
$('ul').append($('<li/>',{'id':'nav-li-'+i}));
$('#nav-li-'+i).append($('<div/>',{'class':'btn btn-lg btn-inverse','data-toggle':'tooltip','data-placement':'bottom','title':data.nav[i].name,'data-id':i,'id':'button_'+i})).css({'margin':'7px','color':'#ffffb3'});
$('#nav-li-'+i).find('#button_'+i).append($('<span/>',{'class':data.nav[i].icon}));
}
//CSS
$('.navbar-wrapper').css({'margin':'5 0 20 0','max-width':'95%'});
$('.navbar').css({'max-width':'95%','margin':'0.2% 2.5% 2% 2.5%','border-radius':'5px','padding':'auto'});
/*
*Bind multiple functions
*/
$('#navbar li div').bind({
click: function(){
var url = $(this).attr('data-url');
window.open(url,'_top');
},
mouseenter: function(){
$(this).css({'color':'lime'});
var id = $(this).attr('data-id');
$(this).attr({'data-url':data.nav[id].href});
},
mouseleave: function(){
$(this).css({'color':'gold'});
$(this).removeAttr('data-url');
}
});
});
