creating a menu with CSS and overflow: auto

2018-06-22 11:00:46

The main structure of the page is like this:

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

I use JQuery to make the H1 elements in #Menu clickable so that all the other UL's are rolled up and the UL after the H1 is rolled down. I would like to scroll #Main indepently of the #Menu and I would like scrollbars, if needed, in each UL in #Menu. Here is the relevant CSS:

    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; }

This works exactly the way I want it to. The #Main area is scrollable and each UL, when expanded, gets a scroll bar if there is more content than the containing #Menu DIV can contain.

The only problem is that I have to specify a height of 87% of the containing #Menu DIV, which only works for my combination of screen size, window size and font size. Is there a way to achieve the same effect without hard-coding the height of each UL?

If you like, you can see the page. I would post links to the CSS (/musicdb.css) and the JS code (/musicdb.js), but I'm not allowed. If you want to view source, you can switch content types by adding ?mode=xml or ?mode=html to the URL and view it in IE or Firefox.

I was playing around your site page with Firebug. Can't really have a really elagant a quick solution for you except for this one:

Setting the "div#Menu" to 100% and "div#Menu H1" to a height in percentage say 5%.

You have "menu", "artists", "labels" and "formats" = 4 h1 items. That's 5 X 4 = 20%.

Set "div#Menu ul" to 100-20 = 80%.

Play around with the numbers and also adjust the vertical alignment, you should be good to go. The downside is, you will not have nice view in extremely small or large screens.

My 2 cents.

链接地址: http://www.djcxy.com/p/63024.html

上一篇: 绝对定位div未隐藏

下一篇: 用CSS创建菜单并溢出：auto