Dynamic drop down menus using CSS and PHP/MySQL

Question

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.

but that will not arrange the items anyway.. pl look at my requirement — Gags
– Gags, Commented Apr 22, 2015 at 17:47
you can add condition and based on that you can create other column and placed your data.like in first column after 10 row it will create other column and so on...Hope i am not wrong.!! — Hardy Mathew
– Hardy Mathew, Commented Apr 22, 2015 at 17:52
What is "not required" about the two results you have? Can you explain, in your question, what you do require? — halfer
– halfer, Commented Apr 22, 2015 at 18:39

moskito-x · Accepted Answer · 2015-04-23 18:23:21Z

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>

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

edited Apr 23, 2015 at 18:23

answered Apr 22, 2015 at 21:05

moskito-x

12k5 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Gags Over a year ago

implemented ur code here ayurvedamantram.com/index1 but it simply doesnt work

moskito-x Over a year ago

@Gags : Have you tried the 32 lines code above. It's simple and running.

moskito-x Over a year ago

@Gags : Copy from first to last line and save to a file like show.php . Run show.php in a browser . It's running out of the box. With 'style.css' in the same folder .

Gags Over a year ago

I will try nd let u knw moskito-x

moskito-x Over a year ago

@Gags : also I can see in your code : <ul> <li><a href='#'>Acidity</a></li> <ul> has no id like : <ul id="quad"> <li>Acidity</li>

|

Community · Accepted Answer · 2017-05-23 12:31:08Z

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.

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 22, 2015 at 17:51

grill

1,1701 gold badge11 silver badges24 bronze badges

1 Comment

grill Over a year ago

An appropriate example is wholly dependent on the data returned by your database. The example I just added is for a general case in which the DB returns an array of menu items.

moskito-x · Accepted Answer · 2015-04-23 12:57:09Z

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.

$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

edited Apr 23, 2015 at 12:57

moskito-x

12k5 gold badges49 silver badges61 bronze badges

answered Apr 23, 2015 at 8:47

david strachan

7,2282 gold badges25 silver badges33 bronze badges

1 Comment

moskito-x Over a year ago

Edit your image . Half of the answer was white and empty.

Collectives™ on Stack Overflow

Dynamic drop down menus using CSS and PHP/MySQL

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related