如何为每个打开菜单的列表项创建一个按钮？

Question

我正在构建一个类似于Android的“Play Market”的移动响应式网页。 我有一个div列表，里面有一个按钮。 每个按钮打开一个带有唯一链接的div。

如何以有效的方式创建这样的东西，而不是以不同的方式定位每个div？

这是我的JSfiddle：http://jsfiddle.net/e0byofe2/

我尝试将position: relative;属性用于菜单 - 它使div中的元素变得混乱。

我尝试使用position: absolute;这是好的，但我不能以全局方式将菜单放在每个div上。

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：     身体{         保证金：0;         身高：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;
}

我能给你的最好的例子就是当你在Android上打开“Play Market”并搜索随机应用程序时，你会得到一堆app div结果。单击右上角的3个点时，它会打开一个列表，其中包含特定应用div上的2个项目。

它应该是这样的：

当您选择其他应用并按下角落中的3个点时，您将获得具有2个选项的相同列表，但是在应用div上。

Answer 1

我已经改变了你的结构，并将'点'图像作为菜单的按钮用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');
    });        
});

示例：http://jsfiddle.net/e0byofe2/3/

是你在寻找什么？