*TeamViewer* kendoMenu example

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id='testDiv'>
</div>
<span id='log'></span>

<div id='hidden'>
    <ul id='dummyMenu'>
        <li>
            Dummy
            <ul></ul>
        </li>
    </ul>
    
    <ul id='menu' style="width: 130px; margin-left: 200px;">
        <li>SomeMenu
            <ul>
                <li>ww</li>
                <li>ww</li>
                <li>ww</li>
                <li>ww</li>
            </ul>
        </li>
    </ul>
</div>

CSS

.bottomLeft .k-animation-container {
    position: absolute;
    left: auto !important;
    right: -3px;
}

#hidden {
    display: none;
}

#testDiv {
    width: 100px;
    height: 100px;
    border: 1px dotted #444;
}

JavaScript

var $log = $('#log'),
    $dummyMenu = $('#dummyMenu'),
    $testDiv = $('#testDiv'),
    $hidden = $('#hidden');

//    make the dummy menu
$dummyMenu.kendoMenu();
//    make the real menu
$('#menu').kendoMenu({
    openOnClick: true,
    animation: false,
    hoverDelay: 0
});

//    bind testDiv on enter and leave
$testDiv
    .mouseenter(function(){
        $dummyMenu.appendTo($testDiv);
        
        $log.text('dummy appended to testDiv');
    })
    .mouseleave(function(){
        clearDummy();
    });

var clearDummy = function(){
    $dummyMenu.appendTo($hidden);
    $log.text('clearDummy> dummy was hidden');
};