How to create drop down menus on dynamically generated div fields

Question

I am loading divs with information from the database using php code:

for ($i=0; $i < $stmt->rowCount(); $i++){
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $name = $row['uc_name'];
    $image_url = $row['uc_image'];
    $color = $row['uc_color'];

The creates a box for however many rows there are: http://jsfiddle.net/pKR5t/1/

I am trying to create a drop down menu for each item retrieved from the database. When the user hovers over class="header", the drop down menu should show but the list inside should be pertaining to that of the box hovered:

enter image description here

I believe I can use the .on() function to accomplish this but I am completely lost on how to use it. Any help on getting this accomplished would be helpful. Thanks

http://jsfiddle.net/pKR5t/12/ The menu is the same for all three except goto links dynamically change — Bhavik P., Jan 09 '13 at 22:18
If you are loading it dynamically via ajax, you can tie the handler to the document, so any new boxes you add also have the dropdown working: http://jsfiddle.net/pKR5t/20/ — scott, Jan 09 '13 at 22:25

score 0 · Answer 1 · answered Jan 09 '13 at 22:11

You can do this without javascript using css.

If you insert your hover box inside your header div you can use css :hover to hide and show it on hover.

HTML

<div class="header">
    <div class="title">PHP Row 1</div>
    <div class="hoverBox">
        <div class="hoverBoxTitle">Hover</div>
        <div class="hoverBoxContent">Hover Content</div>
    </div>
</div>

CSS

.hoverBox {
    display: none;
    position: absolute;
    top: 0px;
    left: 170px;
    width:170px;
    height:90px;
    background:#333333;
    z-index: 100;
}
.header:hover .hoverBox {
    display: block;
}

Demo

score 0 · Accepted Answer · edited May 23 '17 at 12:04

To use on and hover you will want to use the mouseenter and mouseleave events like so:

$("div.box div.header").on("mouseenter", function() { //mouseenter event
    var currentBox = $(this).closest("div.box");
    var currentTitleText = $(this).find("div.title").html();

    //popup the list

}).on("mouseleave", function() { //mouseleave event
    //close the list
});

For some additional info, check this post.

EDIT

Updated mouseover and mouseout to the slightly better mouseenter and mouseleave events.

How to create drop down menus on dynamically generated div fields

2 Answers2