JQuery CSS - floating menu bar -
creating widget displays dynamically generated lists of items. each item has [img] when clicked shows hovering menu bar delete, save, edit item. stuck @ how use css hover bottom of img without affecting div img in? it's scrollable window menu bar has on top when item close bottom within scroll area. advice appreciated.
please see jsfiddle example see in action
my list widget should float menu when [img] clicked each list element:
<div class="scroll"> <ul class="ul1"> <li> <div class="divtop"> <a class="a1" href="javascript:void(0)">[img]</a> <ul class="float-menu"> <li><a href="javascript:void(0)">x</a></li> <li><a href="javascript:void(0)">y</a></li> <li><a href="javascript:void(0)">z</a></li> </ul> <div class="divsub">blah</div> </div> </li> <li> <div class="divtop"> <a class="a1" href="javascript:void(0)">[img]</a> <ul class="float-menu"> <li><a href="javascript:void(0)">x</a></li> <li><a href="javascript:void(0)">y</a></li> <li><a href="javascript:void(0)">z</a></li> </ul> <div class="divsub">blah</div> </div> </li> </ul> </div> //jquery code /* default float menu hidden */ $('.scroll ul li div ul').hide(); $('.a1').click(function() { $('.a1').next('.float-menu').show(); }); $('.a1').mouseout(function(){ $('.a1').next('.float-menu').hide(); }); //css div.scroll { background-color:lightgray; width:450px; height:120px; overflow-y:scroll; } .a1 { float:left; } .divtop { border:1px solid darkgray; } .divsub { margin-right:15px; } .ul1 { list-style-type:none; } .ul1 li { padding-bottom:15px; } .float-menu { list-style-type:none; width:15px; } .float-menu li { padding:0px; border: 1px solid pink; }
heres working fiddle outer <li> height change.
css changes
.ul1 > li { height: 20px; } .float-menu { list-style-type:none; width:15px; background-color: white; /* show menu */ position: relative; /* displays on top of other text */ margin-left: 40px; /* pushes menu over, not sure if wanted*/ } script changes
/* default float menu hidden */ $('.scroll ul li div ul').hide(); $('.a1').click(function () { $(this).next('.float-menu').show(); // use $(this) current clicked element }); $('.a1').mouseout(function () { $(this).next('.float-menu').hide(); // use $(this) mouseout element });
Comments
Post a Comment