I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:
EDIT: using the prototype refactor from remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.
EDIT: This is the html and css I am using:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Thanks for any help.
