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

时间:2022-12-05 12:03:07

I want to create a dynamic drop down menu using PHP and MySQL. Menus is OK but not the way I wanted.

我想用PHP和MySQL创建一个动态下拉菜单。菜单还可以,但不是我想要的方式。

I want the menu like this as below (sorted vertically and limiting number of items vertically and horizontally)

我想要如下所示的菜单(垂直排序和水平排序)

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

I tried achieving this as per below code:

我试着按照下面的代码实现这个目标:

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

By above approach i am getting this as a result which is not rquired

通过上面的方法,我得到了一个不需要的结果

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

and without using <div class="four columns"> the result is as below which is again not required

如果不使用

,结果如下所示。

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

I want items to be arranged and shown alphabetically vertically.

我想把物品按字母顺序排列并垂直显示。

3 个解决方案

#1


1  

A simple possibility of sorting first, then second, then etc. column.
Can something be improved.
Shows one of many possibilities.

一种简单的排序方法,先排序,再排序等等。一些可以改善。显示了许多可能性之一。

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

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

Next is the normal standard look of a 4 column list.
To get it we changed only the for loop.
Sorted from left to right ( not what OP wants)

接下来是4列列表的标准外观。为了得到它,我们只修改了for循环。从左到右排序(不是OP想要的)

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

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


Now that we know the matrix ...

既然我们知道了矩阵…

  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

... we can write a simpler function.

…我们可以写出一个更简单的函数。

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

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  

Presumably, you would want to use some sort of for loop to order the data appropriately. You could do this with PHP or you could do it with JavaScript.

您可能希望使用某种for循环对数据进行适当的排序。你可以用PHP或者JavaScript来实现。

Either way, you will need to process the entries returned by the server so as to limit the number of rows added to each column. The way you'll process the data depends on how it is returned by the server. If the server sends JSON data representing the data cells in question (and you're using AJAX), you'll likely need to take a javascript approach. If you plan to load all menu field data upon the initial page load, you can probably use PHP to create the menu entries.

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

This is an example of using a for loop to create a table using PHP. You should be able to do the same thing with either list items and/or divs. If this answer is confusing, there are numerous other examples on both SO and the internet at large.

这是一个使用for循环使用PHP创建表的例子。您应该能够对列表项和/或div执行相同的操作。如果这个答案让人困惑,那么在SO和internet上还有很多其他的例子。

<?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>";
?>

#3


1  

The following code uses 2 loops to create a 4 column table from an assoc array. $z is calculated to sort rows in each column in ascending order.

下面的代码使用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动态下拉菜单

#1


1  

A simple possibility of sorting first, then second, then etc. column.
Can something be improved.
Shows one of many possibilities.

一种简单的排序方法,先排序,再排序等等。一些可以改善。显示了许多可能性之一。

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

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

Next is the normal standard look of a 4 column list.
To get it we changed only the for loop.
Sorted from left to right ( not what OP wants)

接下来是4列列表的标准外观。为了得到它,我们只修改了for循环。从左到右排序(不是OP想要的)

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

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


Now that we know the matrix ...

既然我们知道了矩阵…

  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

... we can write a simpler function.

…我们可以写出一个更简单的函数。

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

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  

Presumably, you would want to use some sort of for loop to order the data appropriately. You could do this with PHP or you could do it with JavaScript.

您可能希望使用某种for循环对数据进行适当的排序。你可以用PHP或者JavaScript来实现。

Either way, you will need to process the entries returned by the server so as to limit the number of rows added to each column. The way you'll process the data depends on how it is returned by the server. If the server sends JSON data representing the data cells in question (and you're using AJAX), you'll likely need to take a javascript approach. If you plan to load all menu field data upon the initial page load, you can probably use PHP to create the menu entries.

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

This is an example of using a for loop to create a table using PHP. You should be able to do the same thing with either list items and/or divs. If this answer is confusing, there are numerous other examples on both SO and the internet at large.

这是一个使用for循环使用PHP创建表的例子。您应该能够对列表项和/或div执行相同的操作。如果这个答案让人困惑,那么在SO和internet上还有很多其他的例子。

<?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>";
?>

#3


1  

The following code uses 2 loops to create a 4 column table from an assoc array. $z is calculated to sort rows in each column in ascending order.

下面的代码使用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动态下拉菜单