如何在锚点上显示弹出菜单

Question

I am making a fairly complex front page that in essence is a threaded discussion forum. At present all is functional but I want to replace the links after the message that allow one to delete, reply, archive and other functions. At present the links are all text. I can use small images and make them look nicer. However on a busy front page with lots of messages and threads a whole bunch of images will make the whole page look overwhelming.

The way it works for now is each iteration of the call to function that reads a message from db will start a ul and this allows me to nicely pad the child messages and the depth.

Here is what I want to do - create a small popup menu that will show up when someone hovers over the actual message. Because my current way of showing threaded messages using ul and li when I tried to use jqueryui menu widget it wrecks the formatting.

Sorry about all the rambling but is there a way to show a slim line of links above a message when someone hovers over it and each message in the page will obviously need to have different links [to allow blah.php?messageid=...].

I have been looking at jqueryui and learnt it to a tiny extent and still reading the tutorial. Is there a way of doing what I asked above!

Thanks

Answer 1

a simple way to do this is as follows:

given markup

<div class="menu-pop">
    <div class="menu-label">Menu Label</div>
    <div class="menu-items">
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
        <div class="menu-item">menu choice</div>
    </div>
</div>

provide css:

.menu-pop {
    position: relative;
}

.menu-pop .menu-items {
    display: none;
    position: absolute;
}

.menu-pop.dropped .menu-items {
    display:inherit;
}

and a simple jquery function:

$(".menu-pop").hover(
        function() { $(this).addClass("dropped"); }, 
        function() { $(this).removeClass("dropped" ); }
    );

then ... well ... make it pretty.

see the jsfiddle here: http://jsfiddle.net/DomDay/rmSHc/