ijquery

منو افقی انیمیشنی

6 دیدگاه / منو، منو افقی / از

screenshot

منو افقی جی کوئری با افکت انیمیشن

آموزش استفاده

  1. قبل از تگ <head/> 
    <script type="text/javascript" src="jquery.min.js"></script>
	<script language="javascript">
		$(document).ready(function() {

			/* 	1st example	*/

			/// wrap inner content of each anchor with first layer and append background layer
			$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

			// loop each anchor and add copy of text content
			$("#menu li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu li a").hover(function() {
				// this function is fired when the mouse is moved over
				$(".out",	this).stop().animate({'top':	'45px'},	250); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
				$(".bg",	this).stop().animate({'top':	'0px'},		120); // move down - show

			}, function() {
				// this function is fired when the mouse is moved off
				$(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	250); // move up - hide
				$(".bg",	this).stop().animate({'top':	'-45px'},	120); // move up - hide
			});

			/*	2nd example	*/

			$("#menu2 li a").wrapInner( '<span class="out"></span>' );

			$("#menu2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});

		});

	</script>
    <style type="text/css">
	body{
		background-color: #CCC;	
	}
	</style>

     

  2. بعد از تگ <body> 
    <div id="menu" class="menu">
			<ul>
				<li><a href="javascript:;">صفحه اصلی</a></li>
				<li><a href="javascript:;">منو 1</a></li>
				<li><a href="javascript:;">منو 2</a></li>
				<li><a href="javascript:;">منو 3</a></li>
				<li><a href="javascript:;">منو 4</a></li>
			</ul>
		</div>

     


پیش نمایش دانلود فایل پلاگین

6 دیدگاه دربارهٔ «منو افقی انیمیشنی»

  2. danial

    مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی مرسی

    دانیال دزفولی نژاد تازه کار در طراحی وب

    پاسخ

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *