function insertStyleSheet(styles, styleId) {
if (!document.getElementById(styleId)) {
var style = document.createElement("style");
style.id = styleId;
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
}
var menuList = [{
label: 'Drag',
selected:true,
action: "menu_click(this,'Drag');",
url:''
}, {
label: 'Edit',
action: "menu_click(this,'Edit');",
url:''
}, {
label: 'Add',
action: "menu_click(this,'Add');",
url:'',
items: [{
label: 'Image',
action: "menu_click(this,'Image');",
url:''
}, {
label: 'Text',
action: "menu_click(this,'Text');",
url:''
}]
}];
function createMenu(id, list) {
var styles=
'ul{position:relative;margin:0;padding:0;height:32px;width:auto;}'
+ 'li {float:left;margin: 0;padding: 0;height: 32px;width: 60px;list-style:none;text-align:center;line-height:32px;position:relative;cursor:pointer;}'
+ 'li:hover {background-color:#eeeeee; }'
+ 'li ul {opacity:0;position:absolute;}'
+ '.menu_selected{background-color:#dddddd;}'
+ '.menu_spliter { width: 2px;height: 32px;background-color:#dddddd;}'
insertStyleSheet(styles, "myMenuStyle");
var ul = $('<ul></ul>');
$('#' + id).append(ul);
for (var i = 0; i < list.length; i++) {
var menu = list[i];
var li = $('<li name="' + menu.label + '">' + menu.label + '</li>');
if (menu.items && menu.items.length > 0) {
var cul = $('<ul></ul>');
li.append(cul);
for (var j = 0; j < menu.items.length; j++) {
var child = menu.items[j];
cul.append('<li name="' + child.label + '" onclick="' + child.action + '">' + child.label + '</li>');
}
} else {
li.attr('onclick', menu.action);
}
ul.append(li);
if (menu.selected) {
li.addClass('menu_selected');
ul.selected = li;
}
li.on('mouseenter', function () {
var c = $(this).find("ul");
if (c && c.css('opacity') == 0) {
c.animate({ "opacity": "0.75", "height": "auto !important", "min-height": "80px" }, "slow", function () { })
}
}).on('mouseleave', function () {
$(this).find("ul").animate({ "opacity": "0", "height": "0" });
}).on('click', function () {
ul.selected.removeClass('menu_selected');
ul.selected = $(this).addClass('menu_selected');
});
if (i < (list.length - 1)) {
ul.append('<li class="menu_spliter"></li>');
}
}
return ul;
}