Dropdown Menu Items Open Outside the Container

Question

I am creating a mobile menu as dropdown list items as follows,

jQuery('#menu-main-menu > .is-dropdown-submenu-parent a').click(function() {
  $(this).siblings('ul').slideToggle(500);
  jQuery(this)
    .closest(".is-dropdown-submenu-parent")
    .siblings()
    .find(".sub-menu")
    .slideUp();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu-mobile" class="menu-list navbar-collapse collapse clearfix">
  <ul id="menu-main-menu" class="navigation clearfix" style="display:flex; flex-direction: column">
    <li data-toggle="collapse" class="dropdown  is-dropdown-submenu-parent collapsed">
      <a href="#">menu 1</a>
      <ul class="sub-menu ">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
    <li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
      <a href="#">menu 2</a>
      <ul class="sub-menu">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
  </ul>
</div>

The problem is when I click into the main menu for opening, it opens outside the frame of the menu (it gets outside the container) explain more: when I click on the menu1 the items of it appear above the menu2. Where it suppose to shift menu2 down and list the items bellow menu1.

I did not get where is the error & I have searched & seen all menus made as I did !!

@Fatimah I made a snippet out of your code and can you let us know what is it you want? it is not clear enough from the code you provided or are you missing some more code? — Manjuboyz
I am using bootstrap 3 for CSS, for that I did not add it. I want: when I click on Menu1 it opens the items under the Menu1 and shifts Menu2 to down. as here in this link stackoverflow.com/questions/41045593/…. Maybe the problem with CSS code — Fatimah Mohmmed

lakshitha madushan lakshitha madushan · Accepted Answer · 2020-05-11T09:32:10

Try this small change

I have commented slideUp() line in the .js. I think it works as you want.

jQuery('#menu-main-menu > .is-dropdown-submenu-parent a').click(function() {
  $(this).siblings('ul').slideToggle(500);
  jQuery(this)
    .closest(".is-dropdown-submenu-parent")
    .siblings()
    .find(".sub-menu")
    //.slideUp();   // commented this line
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu-mobile" class="menu-list navbar-collapse collapse clearfix">
  <ul id="menu-main-menu" class="navigation clearfix" style="display:flex; flex-direction: column">
    <li data-toggle="collapse" class="dropdown  is-dropdown-submenu-parent collapsed">
      <a href="#">menu 1</a>
      <ul class="sub-menu ">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
    <li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
      <a href="#">menu 2</a>
      <ul class="sub-menu">
        <li><a href="#">sub menu 1</a></li>
        <li><a href="#">sub menu 2</a></li>
        <li><a href="#">sub menu 3</a></li>
        <li><a href="#">sub menu 4</a></li>
      </ul>
    </li>
  </ul>
</div>

Dropdown Menu Items Open Outside the Container

1 Answers