visible settings for css/javascript

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

Ben D · Accepted Answer · 2012-02-20 00:05:14Z

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>

Aaron Powell · Accepted Answer · 2012-02-20 00:04:48Z

If you're just wanting to create a basic hover menu you don't need JavaScript at all you can get away with just CSS.

Here's a jsfiddle demo of how to use CSS to create a hover menu.

To directly answer your question you can either manipulate the display or the visibility CSS value using JavaScript like so:

var el = document.getElementById('someElement');

el.style.display = 'none'; //element is hidden
el.style.display = 'block'; //element is shown as a block level element
el.style.visibility = 'hidden'; //element is hidden
el.style.visibility = 'visible'; //element is visible

The different between display and visibility comes down to how you want to have the invisible element treated. By using the display property the element will take up no space in the page, it will have a 0 height and width and padding or margin wont effect it. The visibility property on the other hand just means that you can't see the contents of the element (text, child elements, etc) but it will still take up space in the DOM so other elements will move around it. This can be useful to hide/ show content but not have the page contents move around as everything becomes visible again.

jxpx777 · Accepted Answer · 2012-02-20 00:18:32Z

If you use jQuery, you could do something like:

var setupNavbarInteraction = function(){
    var hideTimeout; 
    $("#hoverTarget").hover(
        function(){ $("#navBar").css({'display': 'block'}); }, 
        function(){ hideTimeout = setTimeout(function(){ $("#navBar").css({'display': 'block'}); }, 4500); }
    );
    $("#navBar").hover(
        function(){ clearTimeout(hideTimeout); }, 
        function(){ hideTimeout = setTimeout(function(){ $(this).css({'display': 'none'}); }, 1500) }
    );
    }
$(document).ready(setupNavbarInteraction);

This code shows the navbar when you mouse over the trigger element. Then, when you mouse out of the trigger, it waits 4.5s before hiding the navbar again. Then the second part cancels the previous call to hide the navbar when you mouse over the navbar and then hides it 1.5s after you mouse out of the navbar. Adjust timeouts to suit your taste and IxD needs. The timeouts allow the user to continue using the elements and not be penalized for accidentally mousing out of the navbar area.

umjasnik · Accepted Answer · 2012-02-20 00:22:15Z

0

The most reusable way to do it, would be to use a css class that you add to the element to mark it hidden or that you remove to show the element

css:

.hidden {

  /* there are several ways to hide, depeneding on the use case: */
  display: none;
  visibility: hidden;
  position:absolute; left:-9999;

}

javascript:

var toggleOn = function(id) {
    var element = document.getElementById(id);
    element.className = element.className.replace(" hidden", "");
};
var toggleOff = function(id) {
    document.getElementById(id).className += " hidden";
}

edited Feb 20, 2012 at 0:22

answered Feb 20, 2012 at 0:15

umjasnik

363 bronze badges

Comments

Ironsun · Accepted Answer · 2012-02-20 01:19:18Z

0

$(document).ready(function(){$('myelement').slideUp();});   
 $('#element').live('mouseover',function(){$('myelement').slideUp();});
    $('#element2').live('mouseover',function(){$('myelement').slideDown();});

you can use easing plugin if you want it to be done with some animation

answered Feb 20, 2012 at 1:19

Ironsun

9112 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

visible settings for css/javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related