javascript - How to create a button to every list item which opens a menu over it?

Question

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 unique links.

how do I create something like this in an efficient way without positioning every div differently?

This is my JSfiddle: http://jsfiddle.net/e0byofe2/

I tried using the position: relative; property to the menu - it made a mess with the elements within the div.

I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.

HTML:

<div class="main">

    <div id="header-wrap">
        <div id="header" class="clear">
            <img src="arrow.jpg" />
            <img src="search.jpg" style="float: right;" />
        </div>
    </div>

    <div class="content">
        <div id="apps-header">Apps</div>
        <div class="line"></div>
        <div class="apps">


            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                    <div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">

                    </div>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>







        </div>


    </div>






</div>

CSS: body{ margin: 0; height: 100%; }

.main{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #689f38;
    height: 62px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}


.content{
    padding-top: 80px;
    width: 100%;
    /*height: 100%;*/
    background-color: #eeeeee;
}

#apps-header{
    margin-left: 10px;
    font-family: arial;
    background-image: url('triangle.png');
    background-position: bottom;
    width: 86px;
    background-repeat: no-repeat;
    background-size: 10px;
}

.line{
    width: 100%;
    height: 2px;
    background-color: #458b09;
    margin-top: 10px;
}

.apps{
    width: 100%;
    /*border: 1px solid black;*/
    padding-top: 10px;
    height: 100%;
}

.app{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    background-color: #fafafa;
    padding: 10px 8px;
    margin: 5px 8px;
    display: inline-table; /******/
}

.app_icon{
    width: 83px;
    height: 83px;
    float: left;
}

.app_info{
    /*border: 1px solid red;*/
    float: left;
    width: 210px;
    height: 81px;
    padding-left: 20px;
}

.app_name{
    font-family: arial;
    font-size: 18px;

}

.app_comp{
    font-family: arial;
    font-size: 16px;    
    color: #595959;
}

.stars img{
    float: left;
    width: 14px; 
    height: 14px;
}

.free{
    color: #69a03a;
    font-family: arial;
    position: relative;
    bottom: -25px;
    left: 105px;
    font-size: 14px;
}

.3dots{
    height: 25px;
}

The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.

It should look like this:

When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.

Answer 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"/>
<div class="dots_menu">
    <a href="#">link 1</a>  
    <a href="#">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: 0px 4px 15px #000;
    -moz-box-shadow: 0px 4px 15px #000;
    box-shadow: 0px 4px 15px #000;
}

.dots_menu.show
{
    display: block;
}

.dots_menu a
{
    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?