I think something like this might be a start. I know the code is probably far from consistent or optimized. I just threw it together to see what the problem might be.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../jquery-1.1.1.pack.js" type="text/javascript"></script>
<style type="text/css">
* { margin:0; padding:0; border:0; list-style:none; }
ul { height:150px; }
ul li { float:left; position:relative; margin:5px; }
ul li a { display:block; height:150px; width:150px; }
ul li a#a-1 { background-color:red; }
ul li a#a-2 { background-color:blue; }
ul li a#a-3 { background-color:green; }
ul li a#a-4 { background-color:orange; }
</style>
<script type="text/javascript">
jQuery(
function( $ )
{
var menu = $( "#menu" );
menu
.hover(
function( ){ },
function( )
{
$( this )
.find( "a" )
.animate( {
width:150 }, "slow" );
}
)
.find( "a" )
.mouseover(
function( )
{
$( this )
.addClass( 'active' )
.animate( { width: 210 }, "slow" );
menu
.find(
"a" )
.not(
".active" )
.animate( { width: 130 }, "slow" );
}
)
.mouseout(
function( )
{
$( this
).removeClass( 'active' );
}
)
;
}
)
;
</script>
</head>
<body>
<div id="container">
<ul id="menu">
<li> # One </li>
<li> # Two </li>
<li> # Three </li>
<li> # Four </li>
</ul>
</div>
</body>
</html>
--
View this message in context:
http://www.nabble.com/problem-with-mootools-like-top-navigation-tf3159556.html#a8779051
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
