Value Chain Element Context Menu

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27"></script>
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-viewer.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<h3>Base/Area Element Context Menu</h3>

    <div id="ctxMenu" class="vc-element-menu">
        <div class="vc-menu-header">Item Options</div>
        <ul class="vc-menu-items">
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-delete-18"></div><span>Delete</span>

            </li>
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-reoccurring-18"></div><span>Set as Reoccurring</span>

            </li>
            <li class="vc-flex vc-menu-item-sep">
                <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>

            </li>
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-start-group-18"></div><span>Start Item Group</span>

            </li>
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-end-group-18"></div><span>End Item Group</span>

            </li>
            <li class="vc-flex vc-menu-item-sep">
                <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>

            </li>
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-add-right-18"></div><span>Insert Right</span>

            </li>
            <li class="vc-flex">
                <div class="vc-icons-18 vc-icon-add-left-18"></div><span>Insert Left</span>

            </li>
        </ul>
    </div>

<h3>Event Element Context Menu</h3>

    <div class="vc-element-menu">
        <div class="vc-menu-event-header">Item Options</div>
        <ul class="vc-menu-items">
            <li class="vc-flex vc-flex-left">
                <div...

CSS

.vc-element-menu {
    display:initial;
    position:relative;
    width: 200px;
    z-index: initial;
}
.vc-element-items li > span{
    width: inherit;
}

JavaScript

$(function () {
    $('.vc-menu-items > li span').hover(function (e) {
        if (!$(this).parent().hasClass('vc-menu-item-sep')) {
            $(this).addClass('vc-action-menu-hover');
        }
    }, function () {
        $(this).removeClass('vc-action-menu-hover');
    });
});