Tips and Tricks - Design

Tutorial

Photoshop

Design for Photoshop Mania

HariesDesign.com - This is 3 design of Photoshop Mania

...

Free Download Adobe Photoshop Cs4

Link Download :

...

Download Photoshop Top Secret

Download facebook wallpaper

HariesDesign.com - Download facebook wallpaper by hariesdesign :

Download...

Joomla

Simple method to change administrator address

Why Are Web Designers Using Joomla?

Configuration of gravatar in yvcomment system joomla

Display Adsense Google Search Result in Joomla

Recommendation Joomla 1-6 ( SEO improvements )

Reset Administrator Joomla Password

Tips Joomla Scurity

Flash

Smoothing image in flash

Clouds Animation

Hiding default menu items

Simple Smooth Masking

Load external image

Sound On-Off Button

Time And Date in Flash

Sep

2008

Animated Menu with JQuery

HariesDesign.com Follow this step to make animated menu with JQuery

Demo

Step 1

Place Beetween <HEAD>...</HEAD>

<style type="text/css" media="screen">
		body {
			margin: 0;
			padding: 0;
			font: 100%/1.5 "lucida sans unicode", verdana, tahoma, sans-serif;
		}
		
		#nav { 
			width: 401px;
			height: 48px;
			margin: 0;
			padding: 0;
			background: url(images/animated-nav.png) repeat-x;
			list-style: none;
			overflow: hidden
		}
		
		#nav li { 
			position: absolute;
			overflow: hidden;
			font-size: 1em;	 
		}
		
		#nav li, #nav li * { height: 48px }
		#nav a { display: block }
		#nav em, #nav span { 
			display: block;
			position: absolute;
			top: 0; left: 0;
			z-index: 1;
			background: url(images/animated-nav.png) no-repeat; 
			cursor: pointer;
		}
		
		#nav span { display: none }
		
		#n-home { left: 23px }
		#n-home, #n-home * { width: 77px }
		#n-home em { background-position: -23px 0 }
		#n-home:hover em, #n-home span, #home #n-home em { background-position: -23px -49px }
		#n-about, #n-about * { width: 83px }
		#n-about { left: 99px }
		#n-about em { background-position: -99px 0 }
		#n-about:hover em, #n-about span, #about #n-about em { background-position: -99px -49px }
		#n-services, #n-services * { width: 98px }
		#n-services { left: 182px }
		#n-services em { background-position: -182px 0 }
		#n-services:hover em, #n-services span, #services #n-services em { background-position: -182px -49px }
		#n-contact, #n-contact * { width: 98px }
		#n-contact { left: 280px }
		#n-contact em { background-position: -280px 0 }
		#n-contact:hover em, #n-contact span, #contact #n-contact em { background-position: -280px -49px }
		
		#nav .over { text-indent: -999em }
		#nav .over em { background-image: none }
  </style>

Step 2

Replace <BODY>...</BODY> with

<body id="home">
  <ul id="nav">
    <li id="n-home"><a href="#home"><em></em>Home</a></li>

    <li id="n-about"><a href="#about"><em></em>About</a></li>
    <li id="n-services"><a href="#services"><em></em>Services</a></li>
    <li id="n-contact"><a href="#contact"><em></em>Contact</a></li>
  </ul>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
	<script type="text/javascript">
	<!--
    $(document).ready(function(){
      // Get the ID of the body
      var parentID = $("body").attr("id");
      // Loop through the nav list items
      $("#nav li").each(function() {
        // compare IDs of the body and list-items
        var myID = $(this).attr("id");
        // only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
        if (myID != "n-" + parentID) {
          // for mouse actions
          $(this).children("a").hover(function() {
            // add a class to the list item so that additional styling can be applied to the <em> and the text
            $(this).addClass('over');
	          // add in the span that will be faded in and out
						$(this).append("<span><\/span>");
            $(this).find("span").fadeIn(400);
          }, function() {
            $(this).removeClass('over');


            $(this).find("span").fadeOut(400, function() {
				      $(this).remove();
						});
          });
          // for keyboard actions
          $(this).children("a").focus(function() {
            $(this).addClass('over');
						$(this).append("<span><\/span>");
            $(this).find("span").fadeIn(400);
          });
          $(this).children("a").blur(function() {
            $(this).removeClass('over');
            $(this).find("span").fadeOut(400, function() {
				      $(this).remove();
						});
          });
        }
      });
    });
	//-->
  </script>