Question

I’d like to make a section of my html (a nav bar type object, if it makes a difference) invisible, until I hover over a certain place on the page. Then, I’d like to be able to hover over the button that makes it visible, have the nav bar pop into existence, and then be able to access items in the nav bar without it disappearing. Anyone have any pointers? I’d like to maybe write a javascript function to do this, but I’m not sure how to go about making things invisible/visible and toggling that state with javascript.

Thanks

Answer 1

Just create a hidden navbar and add an onmouseover function to the button:

<div id='navbar' style='display:none'>
[content]
</div>

and the button:

<button onmouseover="document.getElementById('navbar').style.display='block'">Hover Over Me</button>

If the navbar is going to appear over or immediately adjacent to the button, you could also look into an all css solution, but you’ve have to ensure that your mouse would never have to “leave” the button are while traveling to the navbar (as long as you can make it to the navbar, even if the navbar is larger than/on top of the button div, without leaving the button div it will work fine):

<style>
.button {width:100px; height:20px; color:#fff;background-color:#360; position:relative;}
.navbar {display:none; position:absolute; top:19px; left:0px; z-index:10; background-color:#fff;color:#000;}
.button:hover .navbar {display:block;}
</style>
<div class='button'>
   <span>HOVER OVER ME</span>
   <div class='navbar'>[The contents of my nav bar]</div>
<div>