ایجاد افکت جالب برای منو های سایت با Jquery

امروز استفاده از انیمیشن های جذاب و جالب در سایت ها بسیاز افزایش پیدا کرده و خیلی از این انیمیشین های ساده و جالب توسط فریمورک Jquery ساخته میشن و من هم امروز تصمیم گرفتم که ساخت یک انیمیشین ساده اما جالب رو براتون توی سایت قرار بدم که امیدوارم ازش خوشتون بیاد و توی سایت های خودتون ازش استفاده کنین.
در این آموزش یک انیمیشین جالب رو برای منو اصلی سایت توسط Jquery می سازیم.

نمایش دمو

دریافت فایل

۱- قدم اول : اسکلت کلی منو که توسط html هست و به شکل زیر می نویسیم :

  <ul id="topnav">
    <li><a href="#">صفحه اصلی</a></li>
    <li><a href="#">فروشگاه</a></li>
    <li><a href="#">طراحی وب</a></li>
    <li><a href="#">میزبانی وب</a></li>
    <li><a href="#">درباره ما</a></li>
    <li><a href="#">تماس با ما</a></li>
</ul>

۲- قدم دوم : توسط کدهای CSS به منو های خودمون شکل میدیم :

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li {
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px;
}
ul#topnav a {
	color: #555;
	background-position: left bottom;
}
ul#topnav span {
	background-position: left top;
}

۳- قدم سوم : ایجاد انیمیشن توسط Jquery :

مرحله اول : فراخوانی Jquery :

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

مرحله دوم : کدهای Jquery که باعث ایجاد افکت میشن :

$(document).ready(function() {
	$("#topnav li").prepend("<span></span>");
	$("#topnav li").each(function() {
		var linkText = $(this).find("a").html();
		$(this).find("span").show().html(linkText);
	});
	$("#topnav li").hover(function() {
		$(this).find("span").stop().animate({
			marginTop: "-40"
		}, ۲۵۰);
	} , function() {
		$(this).find("span").stop().animate({
			marginTop: "0"
		}, ۲۵۰);
	});
});

درباره ی نویسنده

admin سلام! من ادمین ققنوس گرافیک هستم, طراح و برنامه نویس وب و از همه مهمتر عاشق وردپرس. در ضمینه های HTML, Css, Js, jQuery, Php, Mysql و ... تخصص دارم. برای ارسال سفارش طراحی و برنامه نویسی سایت می تونین با این ایمیل [email protected] تماس بگیرین.

طراحی قالب وردپرس

۵ دیدگاه به “ایجاد افکت جالب برای منو های سایت با Jquery”

  • hamed گفته:

    mamnon.

  • حمید گفته:

    سلام دوست عزیز مطلب خیلی عالی بود.
    فقط یک مشکل دارم من چون تازه دارم درس طراحی وب رو برداشتم. بعد از این که دستورات بالا رو در دستورات خودم ست کردم کلاً نوشته های متن راست چین میشن؟ اما من میخوام که از چپ شروع کنم.
    ممنون میشم راهنمایی کنین

  • محمد گفته:

    سلام ممنون
    یه لطف میکنید راجع به sortable ها مطلب بنویسید.که چه جوری drag $ drop کنیم آیتم هامونا یه ای طرف و اونطرف

  • admin گفته:

    اون دو تا کد آخر رو قبل از تگ head بسته باید قرار بدین.

    اگه سورس صفحه دمو رو نگاه می کردین متوجه می شدین !

  • ArefGod گفته:

    اون کد های جی کوئری { ۲ تا کد اخر } رو کجا قرار بدم؟ ها؟ بهتر آموزش بده ما که مثل شما استاد نیستیم!!!

    دستت درد نکنه

دیدگاهی بنویسید

Time limit is exhausted. Please reload CAPTCHA.