SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Sydney, Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbed sidebar vertical scaling help

    I'm trying to make a CSS version of something like the Mozilla tabbed sidebar (press F9 in Mozilla). I'm close - but no cigar.

    I'd like the active submenu to scale to occupy all of the free vertical space, however big or small that may be. A vertical scroll bar should appear within the submenu if its contents is bigger than its viewable area.

    I'm at that stage where I'm ripping out great wads of hair in desperation. I'm sure you know what I mean...

    I can't get the submenu to scale properly - using max-height: 100%; doesn't work. Any ideas?

    Here's the offending code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <title>CSS Menu</title>
    <style type="text/css">
    /* Page layout styles */
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      div {
        margin: 0;
        padding: 0;
      }
      p {
        clear: left;
        margin: 0;
      }
      #content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 180px;
        right: 0;
        overflow: auto;
      }
      #navbar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 4px;
        width: 175px;
        overflow: none;
      }
    /* Link styles */
      a {
        text-decoration: none;
      }
      a:link {
        color: #080;
      }
      a:visited {
        color: #790;
      }
      a:active {
        color: red;
      }
      a:hover {
        text-decoration: none;
      }
    /* Sidebar navigation styles - idea taken from the Suckerfish.
       [url]http://www.htmldog.com/articles/suckerfish/[/url]
     */
      #nav {
        display: block;
        position: absolute;
        top: -12px; /* There must be a better way of removing that empty space above the sidebar */
        height: 98%;
        width: 150px;
        padding: 0;
        background-color: #FFF080;
        border: 1px solid #7d6340;
      }
      #nav ul {
        padding: 0;
        background-color: #FFFFA0;
        max-height: 300px; /* FIXED HEIGHT - Setting this to a percentage doesn't seem work.. */
        overflow: auto;
      }
      #nav li {
        list-style: none;
        width: 150px;
        border: 0 solid #7d6340;
        border-bottom-width: 1px; /* Draw line isolating each main option */
      }
      #nav a {
        display: block;
        padding: 2px;
      }
      #nav a:hover {
        background-color: #FFA0A0;
      }
      #nav li ul li a:hover {
        background-color: #A0FFA0;
      }
      #nav li ul {
        display: none;
      }
      #nav li ul li {
        border: none;
      }
      #nav li ul li a:link {
        color: #790;
      }
    </style>
    <script type="text/javascript">
    <!--
    var activeMenu = null; /* Start with inactive menu; use
                                <body onload="openMenu(0);">
                              to select menu 0 as default open menu */
    
    function openMenu(newMenu) {
      if (activeMenu == null) {
        activeMenu = newMenu;
        showMenu(activeMenu);
      } else if (activeMenu != newMenu) { /* selecting an already open menu does nothing! */
        hideMenu(activeMenu);
        activeMenu = newMenu;
        showMenu(activeMenu);
      }
    }
    
    function showMenu(menu) {
      setIdProperty("s" + menu, "display", "block");
    }
    
    function hideMenu(menu) {
      setIdProperty("s" + menu, "display", "none");
    }
    
    /* The following script is thanks to J. David Eisenberg's DOM Series in A List Apart.
       [url]http://old.alistapart.com/stories/domtricks2/[/url]
     */
    
    setBrowser();
    
    var isNav4, isNav6, isIE4;
    /* Browser version snooper; determines your browser
     * (Navigator 4, Navigator 6, or Internet Explorer 4/5)
     */
    function setBrowser() {
      if (navigator.appVersion.charAt(0) == "4") {
        if (navigator.appName.indexOf("Explorer") >= 0) {
          isIE4 = true;
        } else {
          isNav4 = true;
        }
      } else if (navigator.appVersion.charAt(0) > "4") {
        isNav6 = true;
      }
    }
    
    /* Given an id and a property (as strings), set
     * the given property of that id to the value provided.
     *
     * The property is set directly on the tag, not in the
     * stylesheet.
     */
    function setIdProperty( id, property, value ) {
      if (isNav6) {
        var styleObject = document.getElementById( id );
        if (styleObject != null) {
            styleObject = styleObject.style;
            styleObject[ property ] = value;
        }
      } else if (isNav4) {
        document[id][property] = value;
      } else if (isIE4) {
        document.all[id].style[property] = value;
      }
    }
    // -->
    </script>
    </head>
    <body onload="openMenu(0);">
    <div id="navbar">
    <ul id="nav">
      <li><a href="javascript:openMenu(0);">Some options</a>
        <ul id="s0">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </li>
    
      <li><a href="javascript:openMenu(1);">Other options</a>
        <ul id="s1">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
        </ul>
      </li>
    
      <li><a href="javascript:openMenu(2);">Lots more options</a>
        <ul id="s2">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
          <li><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">13</a></li>
          <li><a href="#">14</a></li>
          <li><a href="#">15</a></li>
          <li><a href="#">16</a></li>
          <li><a href="#">17</a></li>
          <li><a href="#">18</a></li>
          <li><a href="#">19</a></li>
          <li><a href="#">20</a></li>
        </ul>
      </li>
    
      <li><a href="javascript:openMenu(3);">Running out of options...</a>
        <ul id="s3">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
          <li><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">13</a></li>
          <li><a href="#">14</a></li>
          <li><a href="#">15</a></li>
          <li><a href="#">16</a></li>
          <li><a href="#">17</a></li>
          <li><a href="#">18</a></li>
        </ul>
      </li>
    </ul>
    </div>
    
    <div id="content">
    <h2>Getting closer to the tabbed sidebar look &amp; functionality...</h2>
    <p>I'm trying to repoduce something like the Mozilla tabbed sidebar.</p>
    <p>This CSS version has:<ul>
      <li>Nav bar that occupies entire window height.</li>
      <li>Coloured hover working in Mozilla and Konqueror.</li>
    </ul>
    ... and the following errors:<ul>
      <li>max-height of sub menus is fixed at 400px; it does not change with respect to window size.</li>
      <li>Mozilla: Annoying horizontal scroll bar almost ever present.</li>
      <li>Konqueror: One vertical scroll bar for entire page - not too bad I suppose.</li>
    </ul>
    Things to try:<ul>
      <li>Ask the kind folk at SitePoint!</li>
    </ul>
    </p>
    <p>The page looks fine on a maximised window (except for the ugly horizontal scroll bars in the active submenu with Mozilla)</p>
    <p>But try reducing the window height...</p>
    <p>All scales well until the bottom menu items get hidden because the active submenu content pushes them below the window.</p>
    <p>What I <em>want</em> to happen is that when the contents of the submenu is too big (ie. it would push other menu elements below the screen if it were fully expanded) then it "scales back" and a vertical scroll bar is added to to view the active submenu contents.</p>
    <p>Or <em>better yet</em> the active submenu scales to occupy all of the free vertical space, however big or small that may be. A vertical scroll bar would be displayed when neccesary. Ugly horizontal scroll bars will be banished!</p>
    <p>I've currently fixed the maximum submenu height to 300px - using a percentage doesn't seem to work.</p>
    <p><em>Please help!</em></p>
    <hr/>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    generally, its a good idea to just post the problem code, rather than the whole page, it makes it hard to read and sometimes harder to identify the problem.

    However, I understand sometimes even you aren't aware of where specifically the problem is.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Sydney, Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I wondered if it was a bit much.

    I did strip out a lot of code (non related script, graphics, etc.), but you're right - I wanted something that you could cut and paste to test and get a fair reflection of what I'm trying to do.

    BTW, any hints on where I'm going wrong?

    Cheers,

    wilinux.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •