rootz159 rootz159 - 3 months ago 17
HTML Question

Materialize dropdown issue

I'm trying to make dynamic dropdown menu. I have database table with dropdown menus.

Table layout
enter image description here

position means position in menu. dropdown (0 - no dropdown, 1 - dropdown "header" with that arrow, 2 - dropdown item). dropdown-parent means id of dropdown header.

Problem is that I can't figure out how to implement it.

$query = $db->query("SELECT * FROM `menu` WHERE
`dropdown` = 0 OR `dropdown` = 1 ORDER BY `position` ASC");
foreach($query as $row) {
if($row['dropdown'] == 0) {
echo '<li><a href="'.$row['url'].'">'.$row['name'].'</a></li>';
}
elseif($row['dropdown'] == 1) {
echo '<li><a class="dropdown-button" href="#" data-activates="dropdown'.$row['position'].'" data-beloworigin="true" data-hover="true">'.$row['name'].'<i class="material-icons right">arrow_drop_down</i></a></li>';
}
}


This code works, but for dropdown items I need to edit this

<ul id="dropdown2" class="dropdown-content">
<li><a href="#">Test #1</a></li>
</ul>


Do you have any idea how to implement it?

EDIT

This is what I want

<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Test item #1 for dropdown1</a></li>
<li><a href="#">Test item #2 for dropdown1</a></li>
<li><a href="#">Test item #x for dropdown1</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#">Test item #1 for dropdown2</a></li>
<li><a href="#">Test item #2 for dropdown2</a></li>
</ul>
<ul id="dropdownx" class="dropdown-content">
<li><a href="#">Test item for dropdownx</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#">Header without dropdown</a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown1">Header with dropdown1 items</a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown2">Header with dropdown2 items</a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdownx">Header with dropdownx items</a></li>
</ul>


I tried this

$query = $db->query("SELECT * FROM `menu` WHERE `dropdown` = 2 ORDER BY position ASC");

foreach($query as $row) {
echo '<ul id="dropdown'.$row['dropdown-parent'].'" class="dropdown-content">
<li><a href="'.$row['url'].'">'.$row['name'].'</a></li>
</ul>';
}


but I'll get

<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Test item #1 for dropdown1</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Test item #2 for dropdown1</a></li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#">Test item #x for dropdown1</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#">Test item #1 for dropdown2</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#">Test item #2 for dropdown2</a></li>
</ul>
<ul id="dropdownx" class="dropdown-content">
<li><a href="#">Test item #1 for dropdownx</a></li>
</ul>


There's problem in that foreach, but I don't know hot to fix it.

Answer

You need to make the <ul> based on some logic. There are three steps. You are on the first one, you need to end one and create another, you are on the last one. Below is an untested attempt. Should get you close. Also a note I changed $query to $rows for clarity.

$rows = $db->query("SELECT * FROM `menu` WHERE `dropdown` = 2 ORDER BY position ASC");

$start = true; // Just to know we are starting

foreach($rows as $row) {
    if($start){ // Need to only create an open ul tag
        echo '<ul id="dropdown'.$row['dropdown-parent'].'" class="dropdown-content">';
        $start = false; // Never do this again.
    }

    if(isset($lastRowParent) && $lastRowParent != $row['dropdown-parent']){
        echo '</ul>'; //End the last dropdown

        // Start the next one
        echo '<ul id="dropdown'.$row['dropdown-parent'].'" class="dropdown-content">';
    }        

    echo '<li><a href="'.$row['url'].'">'.$row['name'].'</a></li>'; //Output the content
    $lastRowParent = $row['dropdown-parent']; // Update the parent
}

echo '</ul>'; //When the loop ends the last ul will not be closed. close it.