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

时间:2015-04-22 17:45:10

标签: php jquery html mysql css

我想使用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

并且未使用<div class="four columns">,结果如下所示,再次不需要

enter image description here

我希望项目按字母顺序排列和显示。

3 个答案:

答案 0 :(得分:1)

据推测,您可能希望使用某种for循环来适当地排序数据。您可以使用PHP执行此操作,也可以使用JavaScript执行此操作。

无论哪种方式,您都需要处理服务器返回的条目,以限制添加到每列的行数。处理数据的方式取决于服务器返回的方式。如果服务器发送表示相关数据单元的JSON数据(并且您正在使用AJAX),则可能需要采用javascript方法。如果您计划在初始页面加载时加载所有菜单字段数据,则可以使用PHP创建菜单条目。

This是使用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>";
?>

答案 1 :(得分: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

接下来是4 column list正常标准外观 为此,我们只更改了for loop 从左到右排序( 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%; }

答案 2 :(得分:1)

以下代码使用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;

enter image description here