Вот такое решение, но снова есть вопрос: как добавить .button например в меню
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);
});