Sample Context Menu

Sample context menu for online manual

by Brian Duffey

HTML

<ul class="main"><li class="separator">Paste</li>
    <li class="cell">Cell <span class="more">&#9658;</span>
        <ul class="sub"><li>Edit Cell HTML</li>
        <li>Merge Cells<li></ul></li>
    <li class="row">Row <span class="more">&#9658;</span>
        <ul class="sub"><li>Edit Row HTML</li></ul></li>
    <li class="column">Column <span class="more">&#9658;</span>
        <ul class="sub"><li>Insert Column Before</li>
            <li>Insert Column After</li>
            <li>Delete Column</li></ul></li>
    <li class="table">Table <span class="more">&#9658;</span>
        <ul class="sub"><li>Delete Table</li>
            <li>Edit Table HTML</li>
            <li>Hide Table</li></ul></li></ul>

CSS

ul.main { height:150px; width:120px; background-color:#F1F1F1; display:block; border:1px solid grey; }
ul.main li { padding-left:20px; position:relative; float:left; height:30px; width:100px; }
li:hover { background-color: blue; }
ul.sub { display:none; position:relative; left:100%; top:-20px; width:150px; background-color:#F1F1F1; border:1px solid grey; }
ul.sub li { width:130px; }
span.more { float:right; padding-right:10px; }
.cell ul.sub { height:210px; }
.row ul.sub { height:150px; }
.column ul.sub { height:90px; }
.table ul.sub { height:90px; }

JavaScript

jQuery(function(){
    jQuery('li.cell').hover(function(){
        jQuery(this).find('ul.sub').toggle();
    });
        jQuery('li.row').hover(function(){
        jQuery(this).find('ul.sub').toggle();
    });
        jQuery('li.column').hover(function(){
        jQuery(this).find('ul.sub').toggle();
    });
        jQuery('li.table').hover(function(){
        jQuery(this).find('ul.sub').toggle();
    });
});