Navigate effortlessly with our vertical multi-level menu - simply hover over an option to reveal the next level of

Question

Navigate effortlessly with our vertical multi-level menu - simply hover over an option to reveal the next level of

This particular image demonstrates a vertical menu that is expanded. I am looking to display only the parent tag initially and upon hovering, show the next level and so forth.

function display_children($parent, $level, $categoryModel) {

    $result = $categoryModel->get_category($parent);
    echo "<ul>";
    foreach ($result as $row) :
        if ($row['Count'] > 0) {
            echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a>";
            display_children($row['category_id'], $level + 1, $categoryModel);
            echo "</li>";
        } elseif ($row['Count'] == 0) {
            echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a></li>";
        } 
            else;
    endforeach;
    echo "</ul>";
}

The above code is what I have written, and now I require CSS for it. Since it involves recursive logic, I am feeling unsure about how to proceed. Most of the CSS resources I found were for horizontal menu listing, but I specifically need a vertical menu layout.

jquery html css

Answer 1

Answer №1

Creating a unique CSS cascade interaction with nested lists. By strategically hiding and revealing elements, we can achieve an interesting visual effect.

ul{
/*If bullets are outside, hover effect will flicker.*/
list-style-position:inside;
}

ul ul{
display:none;
}

li:hover>ul{
display:block;
}

<ul>
  <li>
    A
    <ul>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>
  D
    <ul>
      <li>
      E
        <ul>
          <li>F</li>
          <li>
          G
            <ul>
              <li>H</li>
              <li>I</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
      J
        <ul>
          <li>K</li>
          <li>L</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Creating a unique CSS cascade interaction with nested lists. By strategically hiding and revealing elements, we can achieve an interesting visual effect.

ul{
/*If bullets are outside, hover effect will flicker.*/
list-style-position:inside;
}

ul ul{
display:none;
}

li:hover>ul{
display:block;
}

<ul>
  <li>
    A
    <ul>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>
  D
    <ul>
      <li>
      E
        <ul>
          <li>F</li>
          <li>
          G
            <ul>
              <li>H</li>
              <li>I</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
      J
        <ul>
          <li>K</li>
          <li>L</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Navigate effortlessly with our vertical multi-level menu - simply hover over an option to reveal the next level of

Answer №1

Similar questions

Assigning event to the body element

Increase transparency of scrollbar background

Continuously I am being informed that the value is null

Can you explain the inner workings of the delegate() and live() methods?

How to extract the value of an HTML text field by executing an SQL query in PHP

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

The alignment of the label button within the form-group is being set to the top

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

What could be causing my view to not load the jQuery code from _Layout.cshtml, yet it works when I include it directly in the view file?

CSS/jQuery animation alignment problem

Creating dynamic visual effects for text on image with animation

Ways to access a JavaScript object beyond the function scope

Guide to incorporating Jquery-Comment into Angular versions 2 and beyond

Issue with scrollable multilevel dropdown menu

Issue with Slick Grid not updating after Ajax request

Click a button to switch the visibility of a section in an

Iterate over div elements using jQuery

Oops! Smarty encountered a fatal error that wasn't caught

Deactivate weekends when checkbox is marked and reactivate them when unchecked

"The Ajax function for replacing a div upon change event is not functioning properly