créer un menu avec CSS et overflow: auto

La structure principale de la page est comme ceci:créer un menu avec CSS et overflow: auto

<html> 
    <body> 
     <div id="Menu"> 
      <h1>Menu</h1> 
      <ul id="MenuList><!-- some LI elements --></ul> 
      <h1>Submenu 1</h1> 
      <ul id="Submenu1List"><!-- many LI elements --></ul> 
      <h1>Submenu 2</h1> 
      <ul id="Submenu2List"><!-- many LI elements --></ul> 
      <h1>Submenu 3</h1> 
      <ul id="Submenu3List"><!-- some more LI elements --></ul> 
     </div> 
     <div id="Main"><!-- long content --></div> 
    </body> 
</html>

J'utilise JQuery pour faire les éléments H1 à cliquable #Menu de telle sorte que tous les autres UL de sont retroussées et l'UL après le H1 est abaissé. Je voudrais faire défiler #Main indépendamment du #Menu et je voudrais des barres de défilement, si nécessaire, dans chaque UL dans #Menu. Voici le CSS pertinent:

 
    html { height: 100%; overflow: hidden; font-size: .8em; } 
    body { height: 100%; overflow: hidden; } 
    div#Main { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 79.9%; } 
    div#Menu { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 20%; } 

    div#Main { overflow: auto; } 
    div#Menu h1 { font-size: 1.5em; } 
    div#Menu ul { max-height: 87%; overflow: auto; }

Cela fonctionne exactement comme je le veux. La zone #Main est scrollable et chaque UL, lorsqu'elle est développée, obtient une barre de défilement s'il y a plus de contenu que le DIV #Menu contenant peut contenir.

Le seul problème est que je dois préciser une hauteur de 87% du contenant #Menu DIV, qui ne fonctionne que pour ma combinaison de taille de l'écran, la taille de la fenêtre et la taille de la police. Existe-t-il un moyen d'obtenir le même effet sans coder en dur la hauteur de chaque UL?

Si vous le souhaitez, vous pouvez voir the page. Je posterais des liens avec le CSS (/musicdb.css) et le code JS (de /musicdb.js), mais je ne suis pas autorisé. Si vous voulez voir la source, vous pouvez changer les types de contenu en ajoutant? Mode = xml ou? Mode = html à l'URL et l'afficher dans Internet Explorer ou Firefox.

Source

2009-10-18 JoostM

Je jouais autour de votre page de site avec Firebug. Vous ne pouvez pas vraiment avoir une solution vraiment élagante pour vous sauf pour celui-ci:

Régler le «div # Menu» sur 100% et «div # Menu H1» sur une hauteur en pourcentage de 5%.

Vous avez "menu", "artistes", "labels" et "formats" = 4 articles h1. C'est 5 X 4 = 20%.

Set "div # Menu ul" à 100-20 = 80%. Jouez avec les chiffres et réglez également l'alignement vertical, vous devriez être prêt à partir. L'inconvénient est, vous n'aurez pas de belle vue dans les écrans extrêmement petits ou grands.

Mes 2 cents.

Source

2009-10-18 12:36:09

Réglage d'une hauteur sur les H1 est une bonne idée, va essayer, merci! – JoostM

créer un menu avec CSS et overflow: auto

Répondre

Questions connexes