logo标签列表

使用CSS和PHP/MySQL实现动态下拉菜单

phpjqueryhtmlmysqlcss
4

我想使用PHP和MySQL创建一个动态下拉菜单。虽然菜单可以显示，但不符合我的要求。

我想要的菜单如下所示（垂直排列，且在垂直和水平方向上都有限制）：

enter image description here

我尝试按照以下代码实现此目标：

<?php foreach ($result as $riw) { ?>
<div class="four columns">
<li><a href="<?php echo $riw['fmprmlink']; ?>"><?php echo 
     $riw['remedy_name']; ?></a> </li>
</div>
<?php } ?>

通过上述方法，我得到了以下结果，但这不是我想要的： enter image description here 如果不使用
，则会得到以下结果，也不是我想要的： enter image description here 我希望项目按字母顺序垂直排列并显示。
在你的查询中，你可以添加 order_by 和 check。 - Hardy Mathew
但这并不会以任何方式排列项目。请查看我的要求。 - Gags
你的两个结果中哪些是“不必要的”？你能在问题中解释一下你需要什么吗？ - halfer
嗯，最后一张截图看起来与第一张图片非常相似。您在<li>项目中使用了哪些CSS？-请将其及其他相关CSS添加到您的问题中。由于您想向下排序，因此需要将其分成divs-如果您要横向排序，则可以在一个div中左浮动列表项。 - halfer
是的，它们很相似。我只想将行数限制为5行，列数限制为4列。 - Gags
显示剩余4条评论
3个回答
1
假设你想使用某种for循环来适当地排序数据。您可以使用PHP或JavaScript来完成此操作。
无论哪种方式，您都需要处理服务器返回的条目，以限制添加到每个列中的行数。您处理数据的方式取决于服务器返回数据的方式。如果服务器发送表示所讨论的数据单元的JSON数据（并且您正在使用AJAX），则可能需要采用javascript方法。如果您计划在初始页面加载时加载所有菜单字段数据，则可以使用PHP创建菜单条目。 这是使用PHP创建表格的for循环示例。您应该能够使用列表项和/或div执行相同的操作。如果此答案令人困惑，则SO和互联网上有许多其他示例。
<?php
echo "<table border='1'><br />";

for ($row = 0; $row < 5; $row ++) {
   echo "<tr>";

   for ($col = 1; $col <= 4; $col ++) {
        echo "<td>", [YOUR MENU ENTRY GOES HERE], "</td>";
   }

   echo "</tr>";
}

echo "</table>";
?>
一个合适的例子完全取决于数据库返回的数据。我刚刚添加的例子是针对一般情况，即数据库返回菜单项数组。 - grill
1

一种简单的排序方式是先按第一列，然后按第二列，以此类推。
是否有改进的可能性？
这只是众多可能性之一。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>4 columns</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
<?php
function setline($conte,$i,$count,$ILines){
  $act1 = $i; 
  $act2 = 1*$ILines + $i; 
  $act3 = 2*$ILines + $i;
  $act4 = 3*$ILines + $i; 
  echo "<li>".$conte[$act1]."</li>\n"; // 0
  if ($act2 < $count){ echo "<li>".$conte[$act2]."</li>\n";}
  if ($act3 < $count){ echo "<li>".$conte[$act3]."</li>\n";}
  if ($act4 < $count){ echo "<li>".$conte[$act4]."</li>\n";}
}
//-----------main---------------
echo "<ul id=\"quad\">";
$anArry = array("CSS","XHTML","Semantics","Accessibility","Usability","Web Standards","PHP","Typography","Grids","CSS3","HTML5");
sort($anArry);
$count = count($anArry);
$Idiv = (int)($count/4);
if ($count - ($Idiv * 4)>0) {$ILines = $Idiv+1;} else {$ILines = $Idiv;}

for ($i = 0; $i < $ILines; $i++) {
      setline($anArry,$i,$count,$ILines);
}
echo "<ul/>";
?>
    </body>
</html>

enter image description here

下面是一个普通标准的四列列表样式。 只需更改for循环即可获得此效果。 从左到右排序（不是OP想要的）。
for ($i = 0; $i < $count; $i++) {
      echo "<li>".$anArry[$i]."</li>\n";
    }

enter image description here

现在我们知道了矩阵...
  1| 0-2 3-5 6-8 9-11
col| 1   2   3   4
---|---------------
r 1| 0   3   6   9
o 2| 1   4   7   10
w 3| 2   5   8   11

"

...我们可以编写一个更简单的函数。

"
function sortfor4c($cont,$i,$ILines,&$ICol,&$IRow){
  echo "<li>".$cont[$ICol * $ILines - $ILines + $IRow -1]."</li>\n";
  $ICol++;
  if ($ICol > 4) {
       $ICol = 1;
       $IRow++;
  }      
 }
....
$ICol = 1;
$IRow = 1;

for ($i = 0; $i < $count; $i++) {
    sortfor4c($anArry,$i,$ILines,$ICol,$IRow);
}

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{ 
    margin:0;
    padding:0;
}

ol,ul{
    list-style:none;
}

body{
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#333;
}

ul{
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
    border-top:1px solid #ccc;
}
li{
    line-height:1.5em;
    border-bottom:1px solid #ccc;
    float:left;
    display:inline;
}

#quad li        { width:25%; }
在这里实现了您的代码http://ayurvedamantram.com/index1，但它根本不起作用。 - Gags
@Gags：你试过上面的32行代码了吗？它很简单且运行良好。 - moskito-x
@Gags：从第一行到最后一行复制并保存到一个名为 show.php 的文件中。在浏览器中运行 show.php，它可以直接运行。请确保 style.css 文件与之在同一文件夹中。 - moskito-x
@Gags：我也可以在你的代码中看到：<ul> <li><a href='#'>Acidity</a></li> <ul> 没有像这样的 id：<ul id="quad"> <li>Acidity</li>。 - moskito-x
@Gags：感谢您指出 **&**。我已经在我的代码中删除了 :-) - moskito-x
显示剩余2条评论
1
以下代码使用两个循环从关联数组创建一个4列表格。变量$z被计算用于按升序排序每列中的行。
$count = count($result);
$rows= floor($count/5);
for ($x = 0; $x <= $rows; $x++) {
    for ($y = 0; $y <= 4; $y++) {
        $z=($rows*$y)+$x+$y;
        if($z<$count){
            $html .="<td>".$result[$z]['fmprmlink']."</td>\n";
        }else{
            $html .="<td></td>\n";
        }
        }
    $html .="</tr>\n";
}
$html .="</table>";
echo  $html;

enter image description here

编辑您的图像。答案的一半是白色和空白的。 - moskito-x
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接