@font-face {
font-family: "Alexander";
src: url("../fonts/Alexander/Alexander.eot");
src: url("../fonts/Alexander/Alexander.eot?#iefix")format("embedded-opentype"),
url("../fonts/Alexander/Alexander.woff") format("woff"),
url("../fonts/Alexander/Alexander.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
var menu = [
{
name: 'Menu 1',
submenu: [
{
name: 'Submenu 1.1',
href: 'http://test1.com',
id: 'submenu1'
},
{
name: 'Submenu 1.2',
href: 'http://test2.com',
id: 'submenu2'
}
]
},
{
name: 'Menu 2',
submenu: [
{
name: 'Submenu 2 1',
href: 'wwww.ccc.ru',
id: 'submenu2.1'
},
{
name: 'Submenu 2 2',
href: 'wwww.vcxcvxv.ru',
id: 'submenu2.2'
}
]
},
{
name: 'Menu 3',
submenu: [
{
name: 'Submenu 3.1',
href: 'http://test1.com',
id: 'submenu1'
},
{
name: 'Submenu 3.2',
href: 'http://test2.com',
id: 'submenu2'
}
]
}
];
$(document).ready(function(){
var html = '';
html += '<ul class="menu">';
$.each(menu, function(key,value) {
html += '<li><a>'+value.name+'</a>';
html += '<ul class="submenu">';
$.each(value.submenu, function(skey,svalue) {
html += '<li><a id="'+svalue.id+'" href="'+svalue.href+'">'+svalue.name+'</a></li>';
});
html += '</ul></li>';
});
html += '</ul>';
$( "header" ).append(html);
});