Untermenü mit Anpassungsbreite

Ich habe ein Dropdown-Menü mit vielen Unterebenen. Ich habe ein einfaches Beispiel von 4 Levels gemacht. Da das Menü in einer Seitenleiste ist und auch für kleinere mobile Geräte geeignet sein sollte, möchte ich die Gesamtbreite begrenzt halten.Untermenü mit Anpassungsbreite

Gibt es eine Möglichkeit, die Breite der Ebenen, die nicht aktiv sind, automatisch schrumpfen zu lassen, so dass die Gesamtbreite des gesamten Menüs 220px nicht überschreitet? Wenn ich also mit meiner Maus zu Level 3 gehe, wird die Breite der Level 1 und 2 automatisch schmaler.

Mein Code ist (mit Jquery-Links im Kopfschnitt):

<!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>

Quelle

2016-08-07 Jan de Vries

Dank, schöne Lösung! –

Sie media query verwenden können. Etwas wie:

@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

Quelle

2016-08-07 14:32:12

Danke Mosh. Ich hatte eine ähnliche Lösung, aber das Problem entsteht, wenn Sie Tausende von Links am Ende des Menüs haben. Wird zum großen Skript, verlangsamt sich. SQL ist super schnell, sogar mit Tausenden von Links. Ich habe es jetzt funktioniert, und es ist perfekt. –

Untermenü mit Anpassungsbreite

Antwort

Verwandte Themen