Jan de Vries Jan de Vries - 3 months ago 25
jQuery Question

submenu with adapting width

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>




Answer

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

Comments