CODEWITHSUNDEEP
phpjqueryhtmlmysqlcss
Gags
Gags

Reputation: 3839

Dynamic drop down menus using CSS and PHP/MySQL

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

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

enter image description here

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

enter image description here

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

enter image description here

I want items to be arranged and shown alphabetically vertically.

Upvotes: 4

Views: 1664

Answers (3)

moskito-x
moskito-x

Reputation: 11968

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>

enter image description here

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) 

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

enter image description here

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

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

Upvotes: 1

david strachan
david strachan

Reputation: 7228

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.

$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

Upvotes: 1

grill
grill

Reputation: 1170

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.

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.

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.

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

Upvotes: 1

Related Questions