<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(){
$('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'}));
$('#navbar-header').append($('<a/>',{'class':'navbar-brand','href':'#',html:'<img src="http://www.ledrezen.com/img/social_viadeo.png" id="network-icon" data-toggle="tooltip" title="Home Network" class="img-responsive" width="35" height="35"/>'}));
$('.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)
*/
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);
});
var data = {"nav":[
{
"name":"Home",
"href":"#",
"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"
}
]}
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'});
//CSS hover method and click method
$("#navbar li div").hover(function(){
$(this).css({'color':'white'});
var id = $(this).attr('data-id');
$(this).attr({'data-url':data.nav[id].href});
$(this).click(function(){
var url = $(this).attr('data-url');
window.open(url,'_top');
});
},function(){
$(this).css({'color':'gold'});
$(this).removeAttr('data-url');
});
});
