Adjust position if bottom of element will go off of the bottom of the screen

HTML & CSS
1

Hi guys,

I have a really simple unordered list based menu. It has nested <ul> elements where a nested menu is necessary. However, if you are looking at a long menu, and the very last item has a large nested sub-menu, the bottom may go off of the bottom of the screen. Bearing in mind that this is as simple as just having a floating <ul> full of styled <li>, is there a way to ensure that the bottom of the menu is on the page, or that the menu is somehow scrollable?

A pure CSS solution is preferable, because the whole menu is pure CSS at the moment, but if JS/jQuery is required then that’s fine also as this is for use in a closed environment where I can guarantee the client configuration.

Thanks all

2

Ummm… I’m guessing cuz there is no link but prod pad the bottom on the body tag.

3

Sorry, I’m not sure I understand. If by “there’s no link” you mean that I can’t show you an example, no, that’s because it’s an internal system and I couldn’t show you if I wanted to.

Imagine this structure:

<ul>
  <li>File
    <ul>
      <li>Open</li>
      <li>Save</li>
      <li>Save As</li>
      <li>Close</li>
      <li>Quit</li>
    </ul>
  </li>
  <li>Window
    <ul>
      <li>Cascade</li>
      <li>Tile Vertically</li>
      <li>Tile Horizontally</li>
      <li>Windows
        <ul>
          <li>Window 1</li>
          <li>Window 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

I think that’s right… anyway, The top level items are listed horizontally across the menu bar on the page, so it’ll look something like:

File        Window
--------------------------------------

Now, imagine that you hover over the Window menu that you get a drop down menu with the Cascade, Tile Vertically, Tile Horizontally and Windows options. The Windows option has a submenu. In this example it’s only 2 further options, but imagine it has so many that the bottom of the menu disappears off of the bottom of the window. I need the menu to either push upward so that the top of the menu starts ABOVE the Windows option (as opposed to immediately along side) or for some ability to scroll through the options where the menu doesn’t fit on the screen.

File        Window
--------------------------------------
            | Cascade           |
            | Tile Vertically   |
            | Tile Horizontally |
            | Windows  ---------------
            -----------| Window 1    |
                       | Window 2    |
                       ---------------

Does that make sense?

4

Hi,

You’d have to script it for it to be automatic I’m afraid.

There’s a menu here on CSS tricks that caters for menus below the fold.

5

No problem, thanks Paul. In all honesty I did actually find a post you’d previously made suggesting that same article, after I’d made my original post, and have taken a look. It’s not perfect, but it’s certainly a solution. I’m hoping that whoever manages the menus (they’re built from XML) will either keep large submenus at the top or will break them down in to smaller menus. It’s not the tidiest of solutions, but it’s a solution.

6

Usually when menus start getting that big then its time to re-think the logic. :slight_smile:

7

Aye. The problem is that this is access to the whole company’s reporting, management, the lot. So there’s a “Reports” menu, that’s jammed full. It needs restructuring to be fair, but it is used on everything from a full HD resolution screen, through tablets to smart phones, so it needs to be able to support these different resolutions without menus disappearing.

Will work something out though. Mega-Menus may also help?

8

It sounds as if the menus are likely to grow over time, and become unwieldy regardless of scripts squashing them into view.

Has any research been made into how the site is actually used? It may be that users tend to focus on certain areas depending on their department, and that immediate access from all pages to all content of the site is not that important. In this case, a sub-section menu within each section page may be a better solution (though you’ll probably be including this anyway) coupled with a sitemap page.

9

Indeed; they’re only going to get worse with time, the same way that your Windows start menu on XP got more and more full, until eventually it broke down into either multiple columns or resulted in a scroll. Fortunately, some deprecated pages are removed, but for the most part we’re just adding more and more items.

No, no research has been performed on any aspect. Simply, the current page (which is donkeys years old) is a highly complicated frameset with a horizontal menu across the top in one frame, and the menu for each section loads in to a frame on the left. As more items were added and they started to scroll off of the page, [i]Accordion[/] was introduced to essentially nest menus and make more room. However, the frameset has to go, so I’ve created a much simpler page that uses drop down menus with nested sub-menus to see how that works in comparison. Personally I feel that it’s much better, not least of all because there’s a lot more screen estate to use for the important stuff. It looks much cleaner, and we’re not waiting for the menu pages to load because they’re already there

10

That’s REALLY time to stop putting all the reports on the menu and make a dedicated page for the links to them. If nothing else it’s link overload and a waste of bandwidth.

Ouch.

Ah, ok… GOOD!

Unfortunately you ARE waiting for them to load on EVERY page – which is a waste of bandwidth on pages where people don’t use them.

Massive cascading menus are as big an accessibility train wreck as framesets, target attributes, and all the other stuff that has no business on a website after ~2001ish. As such, do yourself a favor and just make a dedicated directory page for them with normal drill-down access. Then people might actually be able to use it.

11

Sorry, I wasn’t clear. The new page loads the old page content in to an iFrame that fills the entire screen, bar a 27px high menu bar at the top. It’s still using frames, but not a frameset in the strictest sense of the word. It’s loaded once and it’s then there in the browser until the user leaves the tab or refreshes the page