LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Show Sub-Menu On Hover With Main-Menu Overflow Hidden

Show Sub-Menu On Hover With Main-Menu Overflow Hidden

Show-Sub-Menu-On-Hover-With-Main-Menu-Overflow-Hidden
There are many ideas to design a web site or any web application so there is no limit for your web development ideas but it comes to an end when you face any error or limitation or not a solution to your ideas in web development then you drop your magical idea and goes with the procedural old way so you do not have to do this.

Same here when you are working on a navigation menu, there are plenty of ideas available over the internet but that is useless if they do not match your ideas so same here we are with a solution of your idea where you got stuck. So when you are creating a side menu list that will have a sub-list that will be visible on hover. But the problem is that sub-list is hiding behind the parent DIV because of overflow-y: scroll; overflow-x: hidden; that you may need to give a limited fix area to your menu bar so now you may need a fixed height menu so if contain more item then it will show scroll bar in y-axis only and your width remain fixed due to your limitation.

So here we have a fix for this because it is not possible even via CSS3 so you must have to use JavaScript/JQuery but we made it easier by sharing a little code of Vanilla JavaScript. The logic behind is simple that it will just make your Sub-Menu as a position:fixed DIV with calculating the position of your mouse on hover only so then it will be shown over all other DIVs.

Table of Contents

How To Show Sub-Menu On Hover With Main-Menu Overflow Hidden:

First add the below JavaSscrpt at the end of Web Page.

JavaScript:

document.querySelectorAll("li.sub_menu").forEach(function(item) {
  item.addEventListener("mouseover", function() {
        submenuWrapper = item.querySelector(".child"),
        menuItemPosTop = (item.offsetTop - document.querySelector("#sidebar > ul").scrollTop) + 20 + "px",
        menuItemPosLeft = Math.round(item.offsetWidth * 0.75) + "px"
    submenuWrapper.style.cssText = "top:" + menuItemPosTop + "; left:" + menuItemPosLeft;
  })
})

CSS:

Now add the below CSS at the start of Web Page.

#sidebar {
  position: relative;
}

ul {
  width: 160px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
}

li {
  position: static;
}

li .child {
  position: absolute;
  z-index: 10;
  display: none;
}

li:hover > .child {
  display: block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li .child {
  cursor: auto;
}

li .child li {
  padding: 12px 20px;
}

li:nth-child(2n) {
  background: #949494;
}

li:nth-child(2n+1) {
  background: #bbbbbb;
}

li.sub_menu {
  background: #505050;
  cursor: pointer;
}

HTML:

Finally add the below HTML where you want to show on Web Page.

<div id="sidebar">
  <ul>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li class="sub_menu">YYYYYYYYYYY
      <div class="child">
        <ul>
          <li>XXX XXX XXX</li>
          <li>XXX XXX</li>
          <li>XXX</li>
        </ul>
      </div>
    </li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
    <li>XXX XXX XXX XXX</li>
    <li>XXX XXX XXX</li>
    <li>XXX XXX</li>
    <li>XXX</li>
  </ul>
</div>

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article…

Recommended For You:
Pure CSS3 Multi-Tab Widget Without JavaScript Or JQuery

You Like It, Please Share This Recipe With Your Friends Using...

  

2 Responses to “Show Sub-Menu On Hover With Main-Menu Overflow Hidden”

  1. Cybnetics says:

    you made it really easy to understand this pretty hard topic for beginners. You helped me a lot so I just wanna say thanks..

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks for reading this article.

Leave a Reply

Your email address will not be published. Required fields are marked *