ایجاد افکت جالب برای منو های سایت با 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"
		}, ۲۵۰);
	});
});

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

گوگل پلاس

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

  1. حمید

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

    پاسخ
  2. محمد

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

    پاسخ
  3. ArefGod

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

    دستت درد نکنه

    پاسخ

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

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

Time limit is exhausted. Please reload CAPTCHA.