منوی بازشو با افکت انیمیشینی با کمک jQuery
ارسال شده توسط علی | در دستهی جی کوئری
سلام
در این آموزش قصد دارم ساختن یک Navigation Menu رو با یکی از افکت های زیبای جی کوئری آموزش بدم که به صورت خیلی زیبا و نرم به پایین باز میشه. Navigation Menu منوهایی هستن که در اکثر سایت ها مشاهده می کنید که شامل لینک هایی هستن که شما رو به بخش های مختلف اون سایت یا وبلاگ هدایت می کنند. میشه گفت یک جورایی میانبر هستند. معمولاً شامل عنوان هایی چون ” خانه , درباره , تماس , … ” هستند. برای آشنا شدن بیشتر و یادگیری چگونه ساختن این منوها که با سی اس اس به این پست مراجعه کنید : ساخت منوی افقی توسط CSS – داتیس دیزاین
ابتدا شما باید فایل HTML خودتون رو آماده کنید و کتابخانه جی کوئری و بقیه فایل های جاوا اسکریپت رو بهش اضافه می کنیم. برای دریافت کتابخانه جی کوئری به اینجا مراجعه کنید و اگر در ایران تشریف دارید به علت تحریم نمی توانید از خود سایت جی کوئری دانلود کنید ، پس از اینجا دریافت کنید.
در پوشه ای که می خواهید این پروژه رو سیو کنید دو تا فولدر جدید بسازید اولی برای عکس هایی که برای منو به کار می ره ” Images ” و دومی که فایل های جاوااسکریپت و کتابخانه های جی کوئری قرار می گیره به اسم ” js ” . و فایل css رو هم در فولدر اصلی سیو می کنیم و نیازی به فولدر اضافه نخواهیم داشت ;) (در ضمن این کار فقط برای نظم بیشتر هست و اگر خواستید می تونید تمام فایل ها رو در فولدر اصلی ذخیره کنید ولی حواستون باشه که توی اچ تی ام ال آدرس درستشو بذارید. )
شما به فایل ” jquery.easing.1.3.js ” هم نیاز دارید … که می تونید از اینجا دریافت کنید.
کتابخانه های جی کوئری و پلاگین مذکور رو که دریافت کردید آن را در فولدر ” js ” قرار بدید. حالا بریم سراغ HTML و اینارو داخلش قرار بدیم.
1.تعیین عنوان و قرار دادن فایل های جاوا اسکریپت در HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>منوی بازشو با کمک جی کوئری</title> <link rel="stylesheet" href="animated-menu.css"/> <script src="js/jquery-1.3.mini.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/animated-menu.js" type="text/javascript"></script> </head>
این هم از کد اچ تی ام ال ما که فایل های جاوا اسکریپت رو درش قرار دادیم ولی در مورد اون فایل ” animated-menu.js ” هنوز عجله نکنید چون قراره همین رو توی این پست آموزش بدیم و هر وقت تموم شد می تونید اون فایل رو به این اسم و یا هر اسمی که دوست داشتید با پسوند js سیو کنید.
2.کد HTML
حالا می ریم سراغ کد اصلی منو و آیتم ها و لینک هاش . همونطور که از Navigation Menuها صحبت کردیم و یک راهنمایی هم معرفی کردیم می تونیم این منو رو راحت بنویسیم.
<body> <p>با موس روی آیتم ها بروید تا باز شوند :)</p> <ul> <li> <p><a href="http://www.dang3r.us">خانه</a></p> <p>صفحه اصلی</p> </li> <li> <p><a href="http://www.dang3r.us/about">درباره</a></p> <p>اطلاعات بیشتر</p> </li> <li> <p><a href="http://www.dang3r.us/contact">تماس</a></p> <p>تماس</p> </li> <li> <p><a href="http://feeds2.feedburner.com/dang3r">اشتراک</a></p> <p>خوراک</p> </li> <li> <p><a href="#">آرشیو</a></p> <p>مقالات</p> </li> </ul> </body> </html>
خب اینم از این کد ، شما فقط کافیه کد قبلی رو اول بزنید و این هم بعدش و بعد سیو کنید. جدا جدا توضیح دادم که روان تر باشه. در مورد اون ” subtext ” هم که زیر هر آیتم منو هست ، این همون نوشته ای هست که بعد از رفتن موس روی آیتم و باز شدن عکس به سمت پایین نمایش داده میشه.
3.استایل و کار با فایل CSS
خب به بخش هیجان انگیز رسیدیم :دی ! الآن با توجه به کلاس هایی که تعریف کردیم بهشون استایل می دیم و هر طور بخواهیم درشون می آریم. بنده فعلاً یک استایل خیلی ساده می گذارم.
body{
font-family:tahoma;
background:#F3F3F3;
color:#000;
font-weight:bold;
}
ul{
margin:0;
padding:0;
}
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a{
color:#fff;
text-decoration:none;
}
p{
padding:0px 5px;
}
.subtext{
padding-top:5px;
}
.feed{background: url(images/feed.jpg) top left no-repeat;}
.about{background: url(images/about.jpg) top left no-repeat;}
.contact{background:url(images/contact.jpg) top left no-repeat;}
.archive{background:url(images/archive.jpg) top left no-repeat;}
.home{background:(images/home.jpg) top left no-repeat;}
4. دادن افکت انمیشنی با جی کوئری
به بخش مهمی رسیدیم ، در این بخش با کمک جی کوئری افکت انیمیشنی رو ایجاد می کنیم . اسم فایل محتوی این دستورات رو ” animated-menu.js ” بگذارید.
$(document).ready(function(){
$("a").click(function(){
$(this).blur();
});
//موقعی که موس روی آیتم قرار می گیره
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//وقتی که موس از محدوده آیتم خارج می شود
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
کاری که ما اینجا کردیم این بود وقتی که موس روی آیتم قرار می گیره ارتفاع رو به 150پیکسل یعنی همون ارتفاع اصلی عکس به صورت انیمیشن تغییر می ده و در حالت عادی ارتفاع 50 پیکسل هست که فقط یک تیکه معلوم میشه + متنی که ما برای اون آیتم تعیین کردیم.
خب امیدوارم از این آموزش لذت برده باشید و تونسته باشم توی اولین آموزشم خوب توضیح داده باشم و شما بتونید توی طرح هایی که می خواهید استفاده کنید. امیدوارم بتونم آموزش های بیشتری قرار بدم.
2 نظر در “منوی بازشو با افکت انیمیشینی با کمک jQuery”
سلام
وبلاگ قشنگی شده. مبارکه
بازتاب ها
نظر بدهید...