You know when you roll over a menu, it will show a submenu. I wanted to keep the submenu visible even tough I roll out from the button, and only change the submenu when I mouse over other links or buttons.
Does this include javascript? or it can be done just in CSS?
from the sounds of it you best bet would be to set up the javascript so that when that item is hovered over then the expanded action occurs, and only have that item dissapear upon a hover over on a competing item, if you give the code you are using currently it will make it easier to give you an some example code to build off.
This is how I figured I would do it (using jQuery): Edit: for the record, this cannot be done in HTML & CSS alone.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.link {
display: block;
width: 100px;
height: 50px;
border: 1px solid #000000;
float: left;
padding-right: 5px;
}
</style>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.link').mouseover(function() {
$('.link').stop().animate({ //Ensure all ".link" tags are set to black border
border: '1px solid #000000'
});
$(this).stop().animate({ //Change current ".link" to a red border
border: '5px solid #ff0000'
}, 150, function() {
//Do nothing when the animation has finished
});
});
});
</script>
</head>
<body>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 1</a>
</body>
</html>
Hope it helps!
with Jquery/
class of menu buttons : .btnMenu{} class of other buttons & links : .btnOthers{}
$('.btnMenu').hover(
function() {
$('ul.subMenu').css('display','none');};
function() {
$(this).children('ul.subMenu').css('display','block');};
);
$('.btnOthers').hover(
function() {
$('ul.subMenu').css('display','none');}
);
it should work, I have no other solution for now/
may be its possible just using css, but I cant find one/
btw, possible with css3 & html5//