Jump to content

split <ul> list dropdown in multiple columns


vinpkl

Recommended Posts

hi all

 

i m creating dropdown menu and i want to split the menu items in the multiple columns

 

I tried this

<ul style="padding-bottom:20px;">
<?php 
$leftqry="select * from itemstable where item_catg='men'";
$leftresult=mysql_query($leftqry);

for($i = 0; $i < 10; $i++){
//$leftrow=mysql_fetch_array($leftresult);
while($leftrow = mysql_fetch_array($leftresult))
	{
          if (($i % 2) == 0) echo("</ul><ul>");
	  
  	echo "<li>" . "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>»  " .$leftrow['item_name']. "</a></li>";
}				
}	
?>
</ul>	

 

this output the list as

 

<ul><li>item 1</li></ul>
<ul><li>item 2</li></ul>
<ul><li>item 3</li></ul>
and so on

 

But i want it to output the list like this below

 

<ul>
<li>       <li>        <li>
<li>       <li>       <li>
<li>       <li>       <li>
</ul>

 

vineet

Link to comment
https://forums.phpfreaks.com/topic/267459-split-list-dropdown-in-multiple-columns/
Share on other sites

Try,

$leftqry="select * from itemstable where item_catg='men'";

$leftresult=mysql_query($leftqry);

for($i = 0; $i < 10; $i++): ?>

<ul style="padding-bottom:20px;">	
<?php  //$leftrow=mysql_fetch_array($leftresult);

while($leftrow = mysql_fetch_array($leftresult)) {

echo "<li>" . "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>»  " .$leftrow['item_name']. "</a></li>";
if (($i % 2) == 0) echo("</ul><ul>");
  }
?>
</ul>	

<?php endfor;?>

hi jazz

 

Your code output comes as

 

<ul><li>item 1<li></ul>            <ul><li>item 1<li></ul>                  <ul><li>item 1<li></ul>
<ul><li>item 1<li></ul>            <ul><li>item 1<li></ul>                  <ul><li>item 1<li></ul>
<ul><li>item 1<li></ul>            <ul><li>item 1<li></ul>                  <ul><li>item 1<li></ul>

 

I want to have it in single <ul></ul> like this below

 

<ul>
<li>item</il>         <li>item</il>      <li>item</il>
<li>item</il>         <li>item</il>      <li>item</il>
<li>item</il>         <li>item</il>      <li>item</il>
</ul>

 

vineet

Ah, this is a different and is to late to thing  :(

by the way this is a valid html structure

<ul style="padding-bottom: 20px">
    
<?php for($i = 0; $i < 10; $i++): ?>

<?php //$leftrow=mysql_fetch_array($leftresult);

while($row = mysql_fetch_array($result)) {

echo "<li><a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>»  " .$row['name']. "</a></li>";
if (($i % 2) == 0) echo "</ul><ul style=padding-top: 20px>";
  }
?>

<?php endfor;?>
</ul>

 

PS, Christian is right, you can use CSS in this case.

Hi vinpkl,

it was too late last night for me.

Check this out -> http://stackoverflow.com/questions/2478748/can-i-render-in-tabular-form-with-ul-and-li-in-html

In your example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

ul{
    margin: 0 auto;
    padding: 0;
}


/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 100px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="list_wrapper">
    <ul class="multiple_columns">
        <?php //$leftrow=mysql_fetch_array($leftresult);
while($leftrow = mysql_fetch_array($leftresult)): ?>
      <?php echo '<li><a href=#>'.$leftrow['item_name'].'</a></li>';?>
<?php endwhile;?>
    </ul>
</div>
    </div>
    </form>
</body>
</html>

 

try

 

$leftqry="select * from itemstable where item_catg='men'";
$leftresult=mysql_query($leftqry);
$items = array();

while($leftrow = mysql_fetch_array($leftresult))
{          
    $items[] = "<li>" . 
        "<a class='leftnav' href='http://localhost/products.php?category_id=10&dealer_id=22'>»  " .
        $leftrow['item_name']. 
        "</a></li>";
}

$chunk = ceil(count($items)/3);

$chunks = array_chunk($items, $chunk);

foreach($chunks as $ch) {
    echo "<div style='float:left; width:30%;'><ul style='padding-bottom:20px;'>" .
        join("\n", $ch) . "</ul></div>\n";
}

Simple way of doin' what I think your goal is.

Example: http://xaotique.no-ip.org/tmp/1.php

 

<html>
    <head>
        <title>Temp Page</title>
        <style type="text/css">
            #container
            {
                width: 500px;
            }
            
            #list li
            {
                width: 33%;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div id="container">
            <ul id="list">
                <?php
                
                for ($i = 1; $i < 10; $i++)
                {
                    echo "<li>{$i}</li>\n";
                }
                
                ?>
            </ul>
        </div>
    </body>
</html>

Thank you, Kira, for helping to keep things simple. :)

 

That was the exact same solution as I suggested, in case it wasn't clear. It is by far the simplest, most efficient and graceful solution to this issue.

 

Ah...obviously you like simple things  ;)

By the way, Barand's solution is the best for me and array_chunk() is very helpful when constructing db tables with a known number of columns but an unknown number of values.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.