submenu with adapting width

Question

I have a drop down menu with a lot of sublevels. I made an easy example of 4 levels. Because the menu is in a sidebar en should be also convenient for smaller mobile devices, I would like to keep the total width limited.

Is there a possibility to let the width of the levels that are not active automatically shrink, so that the total width of the entire menu doesn't exceed 220px? So when I go with my mouse to level 3, the width of levels 1 and 2 automatically become narrower.

My code is (with jquery-links in the head-section):

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
      $( function() {
        $( "#menu" ).menu();
      } );
    </script>
    <style>
      .ui-menu { width: 100px; font-size:12px; }
    </style>
  </head>
  <body>
    <ul id="menu">
      <li><div>no 1</div>
        <ul>
          <li><div>no 2</div>
            <ul>
              <li><div>no 3</div>
                <ul>
                  <li><div>no 4</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

score 0 · Accepted Answer · answered Aug 07 '16 at 14:32

You can use media query. Something like:

@media screen and (max-width:220px) {
  .ui-menu {
    width:50px;  
  }
  
  .ui-menu .ui-menu .ui-menu {
    width:100px;
  }
}

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
      $( function() {
        $( "#menu" ).menu();
      } );
    </script>
    <style>
      .ui-menu { width: 100px; font-size:12px; }
    </style>
  </head>
  <body>
    <ul id="menu">
      <li><div>no 1</div>
        <ul>
          <li><div>no 2</div>
            <ul>
              <li><div>no 3</div>
                <ul>
                  <li><div>no 4</div></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>

http://jsbin.com/gofolub/edit?html,css,js

Thanks Mosh. I had a similar solution, but the problem arises when you have thousands of links at the end of the menu. Becomes big script, slowing down. sql is superfast, even with thousands of links. I got it working now, and it's perfect. — Jan de Vries, Aug 24 '16 at 16:31

submenu with adapting width

1 Answers1