...

View Full Version : How do I make a menu like this:...



MOD YOU UPP
06-21-2010, 09:31 PM
Hi

I found a website that has an awesome link highlighter thing, but I can't quite understand how they did it. I'm 99% sure its javascript, but I could be wrong. Here is the website: http://www.sosfactory.com/web-design/amazium/
The part I want to emulate is the links in the top right. When you mouse over it the highlight bounces to the link you hover over. I tried looking at the code and here is what it says:


<!--/header -->
<div id="header">
<h1><a href="index.html">AMAZIUM: IT and Management Consulting</a></h1>
<div id="lava">
<ul>

<li class="selected"><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Consulting</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="box"><div class="head"></div></div>

</div>
</div>


I found the CSS file it is referencing, and I believe the LAVA part has something to do with the effect. Here it is:



/*=== Header ===*/

#header {
background: #e0d6c8 url(../images/body-bg.gif) repeat-y center ;
height: 125px;
margin: 0 auto;
width: 963px;
}

#header h1 a {
background: url(../images/header-logo.png) no-repeat top left;
display: block;
width: 343px;
height: 125px;
text-indent: -9999px;
float: left;
cursor: pointer;
}

#lava {
position:relative;
text-align:center;
width:450px;
height:35px;
float: right;
margin: 65px 19px 0 0;
font-weight: bold;
}

#lava ul {
margin:0;
padding:0;
list-style:none;
display:inline;
position:absolute;
top:1px;
z-index:100;
right: 0px;
}

#lava li {
margin:0 15px;
float:left;
}

#lava a, #lava a:visited {
color: #464646;
text-decoration: none;
display: block;
font-size: 15px;
}

#lava a:hover {color: #fff;}

#lava #box {
position:absolute;
left:0;
top:0;
z-index:50;
background:url(../images/tail.gif) no-repeat right center;
height:20px;
padding-right:8px;
margin:1px 0 0 -10px;
}

#lava #box .head {
background:url(../images/head.gif) no-repeat 0 0;
height:20px;
padding-left:10px;
}




Anyone have any ideas about how to do this? Here is a link to the css file:
http://www.sosfactory.com/web-design/amazium/css/styles.css

Also, there is a folder called js that has a few scripts but I'm not sure what they do. Here's the link:
http://www.sosfactory.com/web-design/amazium/js/


Any help is greatly appreciated!

Dean440
06-22-2010, 12:06 AM
This is jQuery, a very popular JavaScript library. The function that does it is called .animate(), which has an "easing" parameter, which refers to the manner in which an object animates: for instance, it can move linearly, bounce, move with parabolic curves, etc.


<!-- lavalamp -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var style = 'easeOutElastic';
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
var default_width = $('#lava li.selected').width();
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
$('#lava li').hover(function () {
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
$('#debug').html(left);
$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
}).click(function () {
$('#lava li').removeClass('selected');
$(this).addClass('selected');
});
$('#lava').mouseleave(function () {
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
});
});
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum