accordion menu: stuck in my list like a trapped diver due to the overflow

Question

accordion menu: stuck in my list like a trapped diver due to the overflow

I need assistance with creating a side menu. Here is the current code I have:

function opensubmenus() {
  $('#submenus').css("display", "block");
}

#menus {
  overflow-y: scroll;
  width: 150px;
  background-color: blue;
}
#submenus {
  background-color: green;
  display: none;
}
submenus ul {
  float: right;
  position: relative;
}
nav {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul>
      <li>
        <span onclick='opensubmenus()'>Menu 1</span>

        <ul id='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>



      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>
</nav>

I am facing an issue where my submenu does not appear outside of the box as desired. I would like to achieve a menu layout similar to this example:
https://i.sstatic.net/KuYsE.png It is crucial for me to maintain the "overflow-y" property due to the large number of menu items requiring a scrolling option. Can you provide guidance on how to achieve this result?

javascript html css

Answer 1

Answer №1

If you wish to keep the sub menus separate from the main menu, place them in a new <div>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul>
      <li>
        <span onclick='opensubmenus()'>Menu 1</span>

      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>

  <div>
    <ul id='submenus'>
      <li>SubMenu 1
      </li>
      <li>
        SubMenu 2
      </li>
      <li>
        SubMenu 3
      </li>
    </ul>
  </div>
</nav>

To align them side-by-side, use float:left; on #menus:

#menus {
  overflow-y: scroll;
  width: 150px;
  background-color: blue;
  float: left;
}

#submenus {
  background-color: green;
  display: none;
}

submenus, ul {
  float: right;
  position: relative;
}

nav {
  overflow: hidden;
}

Answer 2

If you wish to keep the sub menus separate from the main menu, place them in a new <div>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul>
      <li>
        <span onclick='opensubmenus()'>Menu 1</span>

      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>

  <div>
    <ul id='submenus'>
      <li>SubMenu 1
      </li>
      <li>
        SubMenu 2
      </li>
      <li>
        SubMenu 3
      </li>
    </ul>
  </div>
</nav>

To align them side-by-side, use float:left; on #menus:

#menus {
  overflow-y: scroll;
  width: 150px;
  background-color: blue;
  float: left;
}

#submenus {
  background-color: green;
  display: none;
}

submenus, ul {
  float: right;
  position: relative;
}

nav {
  overflow: hidden;
}

Answer 3

Answer №2

You have the ability to modify your CSS and apply an absolute positioning technique to the submenu:

function displaySubmenus() {
  $('#submenus').css("display", "block");
}

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
#submenus {
  position:absolute;
  left:100%;
  top:0;
  background-color: green;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <li>
        <span onclick='displaySubmenus()'>Menu 1</span>
        <ul id='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>
      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>
</nav>

_{Bonus -- Efficiently Handling Multiple SubMenus}

$('span').click(function(){
  var col = $(this).data('color');
  $('.submenus').hide();
  $('span').css('background', '');
  $(this).css('background', col);
  $(this).next('.submenus').show().css('background', col);
})

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
.submenus {
  position:absolute;
  left:100%;
  top:0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <li>
        <span data-color="red">Menu 1</span>
        <ul class='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>
      </li>
      <li>
        <span data-color="yellow">Menu 2</span>
        <ul class='submenus'>
          <li>SubMenu 21
          </li>
          <li>
            SubMenu 22
          </li>
          <li>
            SubMenu 23
          </li>
        </ul>
      </li>
      <li>
        <span data-color="green">Menu 3</span>
        <ul class='submenus'>
          <li>SubMenu 31
          </li>
          <li>
            SubMenu 32
          </li>
          <li>
            SubMenu 33
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 4

You have the ability to modify your CSS and apply an absolute positioning technique to the submenu:

function displaySubmenus() {
  $('#submenus').css("display", "block");
}

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
#submenus {
  position:absolute;
  left:100%;
  top:0;
  background-color: green;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <li>
        <span onclick='displaySubmenus()'>Menu 1</span>
        <ul id='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>
      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>
</nav>

_{Bonus -- Efficiently Handling Multiple SubMenus}

$('span').click(function(){
  var col = $(this).data('color');
  $('.submenus').hide();
  $('span').css('background', '');
  $(this).css('background', col);
  $(this).next('.submenus').show().css('background', col);
})

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
.submenus {
  position:absolute;
  left:100%;
  top:0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <li>
        <span data-color="red">Menu 1</span>
        <ul class='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>
      </li>
      <li>
        <span data-color="yellow">Menu 2</span>
        <ul class='submenus'>
          <li>SubMenu 21
          </li>
          <li>
            SubMenu 22
          </li>
          <li>
            SubMenu 23
          </li>
        </ul>
      </li>
      <li>
        <span data-color="green">Menu 3</span>
        <ul class='submenus'>
          <li>SubMenu 31
          </li>
          <li>
            SubMenu 32
          </li>
          <li>
            SubMenu 33
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

accordion menu: stuck in my list like a trapped diver due to the overflow

Answer №1

Answer №2

Similar questions

What is the reason behind the optional assignment of "window.$ =" in Vue.js imports, but mandatory for jQuery in JavaScript files?

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Is there a way to extract rows from a React MUI DataGrid that are identical to how they are displayed, including any filtering and sorting applied?

Exploring the functionalities of objects in Typescript through the use of the for...in loop

Breaking down a statement into individual elements within an array, incorporating keys alongside the elements within the array

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

Set the cookie to expire in 5 minutes using PHP, JavaScript, or jQuery

What is the best way to ensure the width of the div is adjusted to fit the table it contains?

Conceal elements that are overflowing slightly

Utilizing ng-repeat to display a list of all items organized by various categories in rows

How can one retrieve an element based on its attribute?

JavaScript Time and Amount Formatting

What causes the generation of an outdated object when utilizing the let and new keywords to create a new object within a service function?

Encountering the error 'node' getProperty of undefined while trying to retrieve data from an array stored in my state variable

Screen rendering can be a challenging task

Error loading advertising box within the list item due to nan issue

Operating on a duplicate of the array is necessary for mapping an array of objects to function properly

Utilize data from a dynamically loaded component within a parent component in Vue.js

Tips on dividing or forming an array based on a duplicate key that repeats multiple times

checkbox-activated navigation bar