Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question How do I make a menu like this:...

    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:

    Code:
    <!--/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:

    Code:
    /*=== 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...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!
    Last edited by MOD YOU UPP; 06-21-2010 at 09:36 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    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.

    PHP Code:
    <!-- 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> 
    Last edited by Dean440; 06-22-2010 at 12:14 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •