Menu

by Vladimir

HTML

<b><span rel="1" class="menu-item" >Menu <em>!!!</em>1</span></b>
<div rel="1" class="menu" >Menu content 1</div>
<span rel="2"  class="menu-item" >Menu 2</span>
<div rel="2" class="menu  d1" >Menu content 2
    <ul>
        <li>Text 1</li>
        <li>Text 1</li>
       <li>Text 2</li>
       <li>Text 5</li>
       <li>Text 4</li>
       <li>Text 3</li>
    </ul>
</div>
<span rel="3" class="menu-item" >Menu 3</span>
<div rel="3" class="menu d2" >Menu content 3</div>
<article></article>
<p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some content Some content</p><p>Some content  Some content Some content Some content Some...

CSS

span {
    display: inline-block;
}
div {
    display:none;
    background: #FDD;
    position:absolute;
    top: 20px;
}
div.d1 {
    left:20px;
    top:30px;
}
div.d2 {
    left:40px;
    top:40px;
}

JavaScript

$('body').click(function(evt){
    
   var el = $(evt.target);
    var cls = 'menu';
    var rel = el.closest('.menu-item').attr('rel');
    
    if ( (el.parents('.' + cls).length == 0) && !el.hasClass(cls) &&
        !(el.hasClass('menu-item') && $('div[rel=' + rel + ']').is(':visible')) ){
        $('.menu').hide();
    }
    if(el.hasClass('menu-item') || el.closest('.menu-item').length>0){
     
        if(rel){
             $('div[rel=' + rel + ']').toggle();
        }
    }
    

});
$('li').click(function() {
    $('p').text($(this).text()+$(this).text()+$(this).text()+$(this).text());
});
$('p').click(function(e){
    //e.stopPropagation();
    var str = (new Date).valueOf();
    $('article').html(str);
});