One issue I'm facing is that when I open a Kendo UI context menu from a sidebar link, the hover effect on the sidebar is lost. Is there a way to maintain the focus on the sidebar even when the context menu is triggered? Any suggestions?
Check out the JS Fiddle for reference
JavaScript
$(document).ready(function() {
$('#nav').hover(function(){
$(this).animate({width:'200px'},150);
},function(){
$(this).animate({width:'35px'},150);
});
$("#menu").click(function(e) {
var menuHtml = $("#menu-template").html();
$(menuHtml).kendoContextMenu({
target: $(e.currentTarget),
close: function() {
this.destroy();
},
select: function(e) {
var sel = $(e.item).attr('id');
}
}).data("kendoContextMenu").open();
});
});
HTML
<div id="nav">
<ul>
<li><a id="menu">Click here</a></li>
</ul>
</div>
<script id="menu-template" type="text/x-kendo-template">
<ul>
<li id='rename'>Rename</li>
<li id='delete'>Delete</li>
</ul>
</script>
CSS
#nav {
width:200px;
height:100%;
position:absolute;
top:0;
left:0;
z-index:100;
background:#666;
color:#fff;
overflow:hidden;
}
#nav ul {
margin:0;
padding:0;
width:200px;
margin:40px;
list-style:none;
}
#nav a span {
margin:0 10px 0 0;
}
#nav a {
color:#fff;
font-size:14px;
}