آموزش ساخت منوی آبشاری با jQuery
در این ساعت قصد داریم از سایت تیم طراحی کدپزآموزش ساخت منو آبشاری با jQuery را به دوستان عزیز ارائه دهیم.
منوی آبشاری از کاربردی ترین ابزاری است که امروزه در وب سایت ها مورد استفاده قرار می گیرد. منوی آبشاری یک الگوی نمایش لینک است اما در قالبی مشخص و تعریف شده و همانطور که از نامش مشخص است به صورت آبشاری باز و فعال می گردد. این دسته از منوها در عین سادگی بسیار پرکاربرد هستند. با وجود منوهای آبشاری شما می توانید دهها لینک را در فضای کوچکی گنجانده و هر مورد از لینک ها را در صورت لزوم انتخاب و فعال نمایید. وسعت کاربرد منوهای آبشاری گسترده بوده و طراح وب سایت بنا به سلیقه و نیاز خود می تواند از آن استفاده کند.
برای ساخت منوی آبشاری راهها و روش های زیادی وجود دارد که هر کدام مزیت ها و معایب خود را دارند اما در بین همه این روش ها استفاده از کتابخانه پرقدرت و معروف جاوا اسکریپت یعنی jQuery به دلیل سازگاری با تمام مرورگر های اینترنتی و قدرت مانور بالای آن از دیگر روش های موجود کاربردی تر می باشد.
شروع کار
ابتدا یک فایل HTML ساخته می توانید برای این کار از نرم افزار Dreamweaverاستفاده نمایید.
HTML
کد زیر را در فایل html قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html > <html> <head> <title>jQuery menu/codepaz</title> </head> <body> </body> </html> |
سپس برای افزودن jQuery به منوی آبشاری خود به صفحه کد زیر را در قسمت head قرار دهید
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> |
البته می توانید در قسمت src مکان فایل jquery مورد نظر خود را وارد نمایید.
حال باید عناصر مربوط به منوی آبشاری را در قسمت body قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div class="main_content_codepaz"> <h1><a href="https://codepaz.com">منوی آبشاری چیست و آموزش ساخت منوی آبشاری با جی کوئری در کدپز</a></h1> <h2>شما میتوانید با مراجعه به لینک زیر اموزش کامل طراحی منوی ابشاری با جی کوئری را از کدپز فراگیرید. <br> <a href="https://codepaz.com/">برای اطلاعات بیشتر اینجا کلیک کنید.</a></h2> <ul id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#" class="selected">Parent 02</a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 03</a> <ul> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 04</a></li> </ul> <div class="clear"></div> </div> |
CSS
کدهای مربوط به استایل منوی آبشاری رو در قسمت head قرار دید همچنین می توانید از فایل css خارجی استفاده نمایید که در اینجا برای راحتی کار کدهای زیر را در قسمت head گذاشتیم .
مشخصات ظاهری منوی آبشاری را میتوانید با توجه به سلیقه خود تغییر دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
<style type="text/css"> body {font-family:arial; font-size:11px;} .clear {clear:both} a,h2{ text-decoration: none; color: #fff; } . main_content_codepaz { max-width: 1140px; text-align: center; margin: auto; background: linear-gradient(#18c210,#fcfcfc); padding: 20px; direction: rtl; } /* remove the list style */ #nav { margin:0; padding:0; list-style:none; } /* make the LI display inline */ /* it's position relative so that position absolute */ /* can be used in submenu */ #nav li { display:inline-table; width:100px; background:#ccc; position:relative; z-index:500; margin:0 1px; } /* this is the parent menu */ #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center; color:#333; } #nav li a:hover { color:#fff; } /* submenu, it's hidden by default */ #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:100px; float:left; border-top:1px solid #fff; } /* display block will make the link fill the whole area of LI */ #nav ul a { display:block; height:15px; padding: 8px 5px; color:#666; } #nav ul a:hover { text-decoration:underline; } /* fix ie6 small issue */ /* we should always avoid using hack like this */ /* should put it into separate file : ) */ .html #nav ul { margin:0 0 0 -2px; } </style> |
اما برای استفاده از فایل css خارجی کد زیر را در قسمت head قرار دهید:
|
1 |
>link href="style.css" rel="stylesheet" type="text/css<" |
وکد های بالا را در style.css قرار دهید.
Javascript
و حالا نوبت به کدهای jQuery میرسه تا به اینجای کار ما منویی را ساختیم که دارای زیر مجموعه می باشد و برای آن استایل تعریف کردیم حال می خواهیم با استفاده از jQuery زیرمجموعه ها را به صورت کشویی ظاهر کنیم. کد زیر را در قسمت head بعد از فراخوانی فایل jQuery قرار دهید وسپس فایل را ذخیره کنید و در مرورگر نتیجه کار را مشاهده فرمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(100); }, function () { //hide its submenu $('ul', this).slideUp(100); } ); }); </script> |
همین طور که مشاهده می کنید زمانی که موس را بر روی منو می برید قسمت های زیر مجموعه به صورت کشویی ظاهر می شوند. در رابطه با نحوه کار کد jQuery میتوان گفت ما ابتدا عنصر والد را که در اینجا li مربوط به لیست ul است انتخاب می کنیم سپس برای اکشن hover یعنی زمانی که موس بر روی عنصر می رود دو تابع تعریف می کنیم که پشت سر هم اجرا می شوند و در تابع اولی عنصر ul که مربوط به زیر مجموعه ها می باشد با سرعت 100 میلی ثانیه رو به پایین باز می شود و در تابع دوم بر عکس تابع اول ul به سمت بالا بسته می شود همچنین شما می توانید از افکت های دیگر به جای slideDown و slideUp استفاده نمایید مثلا fadeIn: و fadeout.
این بود آموزش ساخت منوی آبشاری ساده و کاربردی با استفاده از jQuery در پست های بعدی به معرفی منو های قوی تر تحت jQuery خواهیم پرداخت.
4 Comments
Join the discussion and tell us your opinion.
خسته نباشید فراوان
واقعا منوهای قشنگی میشه ساخت با این روش
یکمی هم که کد های css رو عوض میکنی به مراتب بهترو بهتر میشه
ممنون از شما دوست عزیز
این نوع از منو ها به مراتب مخاطب پسند تر نیز می باشند.
منتظر ادامه ی مقاله ها باشید.
با سلام اموزش هاتون خیلی خوبه
خوشحالیم که از اموزشهامون رضایت دارید