How To Create A Button To Every List Item Which Opens A Menu Over It?
I am bulding a mobile responsive web page that looks like the 'Play Market' from Android. I have a list of divs which have a button inside them. Each button opens a div with uniqu
Solution 1:
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png"class="dots"/>
<divclass="dots_menu"><ahref="#">link 1</a><ahref="#">link 2</a></div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px4px15px#000;
-moz-box-shadow: 0px4px15px#000;
box-shadow: 0px4px15px#000;
}
.dots_menu.show
{
display: block;
}
.dots_menua
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?
Post a Comment for "How To Create A Button To Every List Item Which Opens A Menu Over It?"