CODEWITHSUNDEEP
htmlcss
Remi
Remi

Reputation: 11

Make a span overlap an "overflow"

I've encountered a problem with my page. I am using a menu of icons on the left and it displays a span when I put the cursor on an icon. My list being a bit long, I want it to display a scrollbar if the window is smaller: 

overflow-y: auto; 
overflow-x: hidden;

under #navigationMenu.

Doing so, the span hides under the scrollbar on the right. If you remove the overflow items, the span goes over and that is what I'd like to achieve. Unfortunately, if you remove the overflow items under #navigationMenu, the menu is unscrollable.

I've created a Fiddle about it for a better understanding: https://jsfiddle.net/x2rLaaqL/3/

body {
  height: 100%;
  margin-left: 150px;
}
ul {
  height: 100%;
  width: 3%;
  margin: 0;
  padding: 0;
  position: fixed;
}
ul.navbar {
  list-style-type: none;
  padding: 0px;
  margin: 0;
  top: 0em;
  left: 0em;
  min-width: 2.5%;
  z-index: 10;
}
ul.navbar li {
  margin: 0.3em;
  padding: 0.3em;
}
ul.navbar a {
  text-decoration: none;
}
#navigationMenu {
  position: fixed;
  width: 65px;
  overflow-y: auto;
  overflow-x: hidden;
}
#navigationMenu li {
  list-style: none;
  height: 35px;
  padding: 2px;
  width: 20px;
}
#navigationMenu span {
  width: 0;
  left: 40px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  font-size: 125%;
  font-weight: bold;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  -webkit-border-radius: 10px;
}
#navigationMenu a {
  height: 39px;
  width: 38px;
  display: block;
  position: relative;
}
#navigationMenu a:hover span {
  width: auto;
  padding: 0 20px;
  display: inline-block;
}
#navigationMenu a:hover {
  text-decoration: none;
  -moz-box-shadow: 0 0 5px #9ddff5;
  -webkit-box-shadow: 0 0 5px #9ddff5;
  box-shadow: 0 0 5px #9DDFF5;
}
/* Green Button */

#navigationMenu #testClass {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png) no-repeat;
  background-size: contain;
}
#navigationMenu #testClass:hover {
  background: url(https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png) no-repeat;
  background-size: contain;
}
#navigationMenu #testClass span {
  background-color: #7da315;
  color: #3d4f0c;
  text-shadow: 1px 1px 0 #99bf31;
}
<ul id="navigationMenu" class="navbar">
  <li>
    <a id="testClass" href="#">
      <span>Test 1</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 2</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 3</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 4</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 5</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 6</span>
    </a>
  </li>
  <li>
    <a id="testClass" href="#">
      <span>Test 7</span>
    </a>
  </li>
</ul>

<body>
  This is my body.
</body>

The "culprit" is overflow.

#navigationMenu {
   position: fixed;
   width: 65px;
   overflow-y: auto;
   overflow-x: hidden;
}

Upvotes: 1

Views: 69

Answers (1)

myf
myf

Reputation: 11273

The only way to get child element "out" of overflow: hidden parent (which has some position other than static set so overflow takes effect) is to set position of the child to fixed:

https://jsfiddle.net/x2rLaaqL/4/

This won't work in most cases (more precisely in cases when parent is not fixed - then it could scroll "away" from its fixed children), but in your case, because parent is fixed, this can solve your problem.

Upvotes: 1

Related Questions