Skip to content

Instantly share code, notes, and snippets.

@thiagosf

thiagosf/segue.html

Created August 11, 2010 19:49
Show Gist options
  • Save thiagosf/519610 to your computer and use it in GitHub Desktop.
Save thiagosf/519610 to your computer and use it in GitHub Desktop.
Download ZIP
Box fundo do menu segue o hover do link.
Raw
segue.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery Lab</title>
<link href="http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
$(function(){
var _vwidthi = $('.menu ul li a').width() + 20;
$('.back div').width(_vwidthi);
$('.menu ul li a').hover(function(){
$('.back').attr('click', 'false');
var _vwidth = $(this).parent('li').width() + 20;
var _vleft = $(this).parent('li').offset().left - 30;
$('.back div')
.width(_vwidth);
$('.back').stop().animate({
left: _vleft, width: _vwidth
}, 500, 'easeOutBack');
}, function(){
if ($('.back').attr('click') == 'false') {
$('.back div')
.width(_vwidthi);
$('.back').stop().animate({
left: -10
}, 500, 'easeOutBack');
}
});
$('.menu ul li a').toggle(function(){
var _vwidth = $(this).parent('li').width() + 20;
var _vleft = $(this).parent('li').offset().left - 30;
$('.back div')
.width(_vwidth);
$('.back')
.attr('click', 'true')
.stop()
.animate({left:_vleft}, 500, 'easeOutBack');
}, function(){
$('.back div')
.width(_vwidthi);
$('.back')
.stop()
.animate({left:-10}, 500, 'easeOutBack')
.attr('click', 'false');
});
});
</script>
<style>
* {margin:0;padding:0;list-style:none;}
body {font-family:consolas;background:#333;margin:20px;color:#fff;}
.menu {padding:0;color:#fff;margin:0 0 20px 0;font:normal 26px arial;letter-spacing:-2px;}
.menu ul {position:relative;height:70px;color:#fff;width:900px;padding:0;}
.menu ul li {float:left;padding:20px;margin:0 10px 0 0;z-index:9;background:#000;}
.menu ul li a {color:#fff;float:left;z-index:11;position:relative;text-decoration:none;}
.menu ul li.back {position:absolute;top:-10px;left:-10px;z-index:5;overflow:hidden;display:block;width:120px;height:30px;background:none;}
.menu ul li.back .left {background:#990000;z-index:6;width:120px;height:50px;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services Out Back New</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="back"><div class="left"></div></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment