Navigation Menu With Edit Action Sub Menu

In a web application I have a vertical menu built using a

. There's nothing particularly fancy about it. Each
• just has some padding and color. I'm trying figur

Solution 1:

If you're using jquery then this will work for you

JS

    $(function () {
        var controls = $('#controls');

        controls.hover(function(){
           $('a', $(this)).css('opacity', 1);
        },function(){
           $('a', $(this)).css('opacity', 0.3);
        });

        functionhideControls(){
           controls.fadeOut('fast');
        }

        $('.close', controls).click(function(){
           hideControls();
        })

        $('.nav-item').hover(function(){
           var off = $(this).offset()
           controls.css({
              opacity: 1,
              display: 'block',
              left: off.left + 20,
              top: off.top + 20
           });
        }, function(){

        })
     })

CSS

#controls{display: none; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #eee; padding: 20px5px;}
     #controlsa{opacity: 0.3}
     #controlsa:hover{background:#eee}
     #controls.close{font-size: small; background: #000; padding: 3px; color:#fff}
     #nav-menu.tab{width: 100px; background:#ffc}

addition to the markup

<spanid="controls"><ahref="#"id="c1">control 1</a><ahref="#"id="c2">control 2</a><ahref="#"id="c3">control 3</a><ahref="#"class="close">close</a></span>

http://jsfiddle.net/gybUj/.

Same can be achieved with pure CSS too I think.

Solution 2:

I would add popup elements after each item if the list is short, like:

<liclass="box">Box</li>

Hide it from the beginning, using display: none, then show it when the list item is hovered over:

li.nav-item:hover + .box, .box:hover {
    display: block;
}
.box {
    display: none;
    list-style: none;
    opacity: 0.3;
}
.box:hover {
    opacity: 1;
}

You're going to have to tweak the behaviour, perhaps use JS to append the elements if the list is long.

http://jsfiddle.net/4unLH/