Changing the position of the block when you hover over the link

The question was asked: 6 years 7 months ago   views: 8
0

In the layout menu of this type

when you hover over a menu item it "slides" up. On the last menu item, sitting birds, they made some miracle with absolute positioning. You need to hover on the last menu item the birds are raised together with him. I was able to write a script so that when hovering over block was raised

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

 //change the position of the unit. #birds
 var birds = $('#birds'),
 nav = $("#navigation ul li");

nav.each(function(index){
$(this).hover(function(e){
e.preventDefault()
 if (index == 4) {
 birds.css('top', '462px');
}
})
});

});
</script> 

but if you remove the mouse from the item menu, the unit will not be returned. Tell me how I can add this script to make it work correctly?

Asked: 27-11-2012 в 22:15:32
jsfiddle.net/Y7Szk jquery-docs.ru/Events/hover/#overout - 27-11-2012 в 22:24:31
well, only $("#birds").css('top', '462px'); then, if the variable is not specified birds) thank you)) - 27-11-2012 в 22:34:46
You have set a variable above the function hover, this will be just what the $("#birds") can be replaced by birds. - 27-11-2012 в 22:54:33
Volunteers!!! - 28-11-2012 в 01:54:48
I know) is "bizarre" layout, so there is specifically written. - 28-11-2012 в 09:14:39

Answers   1

0

The answer is a question to ponder. Here you can use jquery in order to catch the hover of the menu items to filter the last point, further change the style of the block with the birds - positioning. Look at the event "unhover" and to restore the status quo. Yes, you can. What if...

Take the block with the birds and put it inside the last element of the menu. Styles to position it absolutely to the menu item linking to the top menu. And on :hover the menu item to change the height of this menu item. And the birds will go for the menu. Because it is always tied to the top of the menu, not hats in General. And as if javascript is not needed :)

UPD: regarding the script. If he has only the task to move the bird, then loop through all the menu items nav.each(function(index){})too. as for all items, only checked the index and nothing is done. A desired filter is initially LI and it will apply the hover.

Or $("#navigation ul li").last() / $("#navigation ul li").filter(':last') provided that birdie on the last menu item sits. Or $("#navigation ul li").get(4) if the bird is in fifth menu item. And already for this item will be able to add hover tracking. do not force the browser to do unnecessary things if possible. Proffit from this Udet at the end of the project in the form of a faster website and less angry users on the buggy site :)

Answered: 28-11-2012 в 13:27:23
Yes, it is possible) thanks for the proposed version) - 28-11-2012 в 13:39:04