Question

I asked a similar question earlier but I’ll ask it again in a different way. How can I indent categories and endless sub categories that I have in a select drop down menu using PHP & CSS?

Here is my PHP code.

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $category . '</option>\n';

}  

Here is the output.

   1. Apple
   2. Arts & Entertainment
         1. Amusement
         2. Art
         3. Artists
               1. A
                     1. a1
                     2. a2
               2. B
               3. C
               4. D
   3. Automotive
   4. Network
   5. Server
   6. Web Design
         1. CSS
         2. HTML

The numbers are just there to see the categories and sub categories easier.

Answer 1

In the past I’ve done this by prepending   to the content of each nested option.

$spacer = '  ';

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    $padding = str_repeat($spacer, $depth);

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $padding . $category . '</option>\n';

}  

Where $depth represents the ‘steps’ an option should be indented.

The way I accomplished this was to first put my options into a multidimensional array where children are stored as an array of their parent’s…

Like this:

Array( 
     1 => Array( 
          'name' => 'Apple'
          ),
     2 => 'Arts & Entertainment',
          'children' => Array(
               1 => Array(
                    'name' => 'Amusement'
                    ),
               2 => Array(
                    'name' => 'Art'
                    ),
               3 => Array(
                    'name' => 'Artists'
                    'children' => Array(
                         1 => Array(
                              'name' => 'A',
                              'children' => Array(
                                   1 => Array(
                                         'name' => 'a1'
                                    )
                              )
                         )
                    )
               )
          )
     )
 )

Then I run through the array with a recursive function that steps into each nested array (if present) and appends the $padding to the 'name' value, wraps the option tags around it then returns it. The returned string is appended to the return from all previous calls, and you’re left with an indented option menu. Magic.