CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menuscroll
Aerik
Aerik

Reputation: 2317

How to allow an element to overflow out of a scrollable element

I have a menu that has grown to the point where it is sometimes long enough that I want it to be able to scroll (like on a mobile phone in landscape). This I can achieve no problem.

Inside that menu is a submenu that is supposed to stick out to the side. I can do this no problem too.

I can't do both things - when I make the menu scrollable, the submenu is clipped (at least in Chrome).

What are some good options (I can think of some unappealing ones) to have the submenu not be clipped if the main menu is scrollable?

Here's an example that illustrates what I'm talking about.

function makeScrollable(){
	var outer = document.getElementById("outer");
  outer.style.overflowY="auto";
}
ul{
  list-style:none;
  border: 1px solid black;
  background-color: grey;
  padding: 10px;
}

#outer{
  position: absolute;
  right: 10px;
  max-height: 80px;
}
#inner{
  position:absolute;
  right: 90%;
}
li{
  display:block;
}
<ul id="outer">
<li>one</li>
<li>two</li>
<li>
  <ul id="inner">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
  </ul>
</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<button onclick="makeScrollable()">Make outer scrollable
</button>

Upvotes: 0

Views: 52

Answers (1)

tao
tao

Reputation: 90068

Simply put, you can't have both. Not on the same element, at least.

The way popular libraries do it (i.e. Bootstrap, Material Design) is by placing the sub-menus outside of their parents, on the fly, by:

  • calculating position of sub-menu based on parent element's .getBoundingClientRect() values,
  • attaching sub-menu to <body> element,
  • and disabling scroll on <body> while the sub-menu is open, to prevent moving the parent from under the fixed positioned sub-menu.

As a side-note, I happen to believe your real problem is you're trying to apply desktop paradigms to touch devices, which won't really work.

On touch devices the menu has to be generous enough to allow tapping without worrying about not hitting the intended target. Typically a menu item should be at least 45px tall.

Also, on touch devices, opening the menu over the entire screen width is not a problem. On the contrary: nobody cares about seeing 1/3 of page under a narrower menu.

Sub-menus can open either as accordions in main menu, with slightly different background, pushing subsequent parent elements down or as a new layer of menu over the main one, eventually with a 3d entering/exiting animation, in which case returning to top level should be done by closing the sub-menu, tapping a generous close button or swiping in the direction the menu opened from.

Note I just scratched the surface of good mobile design principles and practices here. Make sure you (re)search more about it, it's quite a vast subject. A good starting point are Material Design Guidelines, from Google.

Upvotes: 1

Related Questions