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

编程入门行业动态更新时间:2024-10-14 18:15:52

本文介绍了如何为每个打开菜单的列表项创建一个按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我建立了一个移动响应式网页，看起来像Android的Play Market。我有一个divs列表里面有一个按钮。每个按钮打开一个具有唯一链接的div。

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

这是我的JSfiddle：

是您要查找的内容？

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: jsfiddle/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:

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.

解决方案

I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery

HTML:

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'); }); });