使用CSS和PHP / MySQL的動態下拉菜單

Question

我想用PHP和MySQL創建一個動態下拉菜單。 菜單還可以，但不是我想要的方式。

我想要這樣的菜單如下（垂直排序和垂直和水平限制項目數）

在此輸入圖像描述

我按照以下代碼嘗試實現此目的：

<?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 } ?>

通過上述方法，我得到的結果是不需要的

在此輸入圖像描述

並且不使用<div class="four columns">結果如下所示，這也不是必需的

在此輸入圖像描述

我希望項目按字母順序排列和垂直顯示。

Answer 1

據推測，您可能希望使用某種for循環來適當地排序數據。 您可以使用PHP執行此操作，也可以使用JavaScript執行此操作。

無論哪種方式，您都需要處理服務器返回的條目，以限制添加到每列的行數。 處理數據的方式取決於服務器返回的方式。 如果服務器發送表示相關數據單元的JSON數據（並且您正在使用AJAX），則可能需要采用javascript方法。 如果您計划在初始頁面加載時加載所有菜單字段數據，則可以使用PHP創建菜單條目。

這是使用for循環使用PHP創建表的示例。 你應該能夠用列表項和/或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>";
?>

Answer 2

排序第一，然后第二，然后等列的簡單可能性。
可以改善一些事情。
顯示許多可能性之一。

<!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>

在此輸入圖像描述

接下來是4 column list的正常標准外觀。
為了得到它，我們只改變了for loop 。
從左到右排序（不是 OP想要的）

for ($i = 0; $i < $count; $i++) {
      echo "<li>".$anArry[$i]."</li>\n";
    }

在此輸入圖像描述

現在我們知道了矩陣......

  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%; }

Answer 3

以下代碼使用2個循環從assoc數組創建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;

在此輸入圖像描述

使用CSS和PHP / MySQL的動態下拉菜單

問題描述

3 個解決方案

解決方案1
1 2015-04-22 17:51:38

解決方案2
1 已采納 2015-04-22 21:05:28

解決方案3
1 2015-04-23 08:47:19

使用CSS和PHP / MySQL的動態下拉菜單

問題描述

3 個解決方案

解決方案1 1 2015-04-22 17:51:38

解決方案2 1 已采納 2015-04-22 21:05:28

解決方案3 1 2015-04-23 08:47:19

解決方案1
1 2015-04-22 17:51:38

解決方案2
1 已采納 2015-04-22 21:05:28

解決方案3
1 2015-04-23 08:47:19