آموزش جی کوئری بخش دوم منوی آبشاری

jqueryدراین بخش به آموزش ساخت منوی آبشاری می پردازیم. داخل بعضی سایت ها که یکی از معروف ترین اونها فیس بوک هستش که شبیه اینو داره ، با پایین رفتن اسکرول بار و صفحه یک منو به صورت ثابت در صفحه وجود داره و دیگر نیاز نیست به بالای سایت بیاید و دنبال لینک های منو بگردید.

کدهای منوی آبشاری ثابت بالای سایت

ابتدا باید کدهای زیر رو که ۳ تا فایل رو فراخوانی می کنه رو ما بین دوتا تگ <head> </head> داخل قالبتون قرار بدید.

<link rel="stylesheet" type="text/css" href="http://picor.ir/wp-content/uploads/2013/08/menu.css">
<script type="text/javascript" src="http://picor.ir/wp-content/uploads/2013/08/jquery.min_.js"></script>
<script type="text/javascript" src="http://picor.ir/wp-content/uploads/2013/08/core.js"></script>

دقت کنید که این ۳تا فایل روی هاست سایت ما قرار دارند ، بهتره که این ها رو ذخیره کنید و روی هاست سایت خودتون آپلود کنید و آدرسشونو داخل کدها قرار بدید.

در ضمن اگر فایل شیوه نامه رو هم باز کنید داخل اون ۴ تا عکس هم بکار رفته و بهتره که اونها  رو هم  ذخیره کنید و روی هاست خودتون ببرید.(همه ی این فایل ها در فایل ضمیمه هستند که می تونید اونها رو آپلود کنید).

سپس کدهای زیر رو بعد از تگ <body> در قالبتون قرار بدید.

<div id="header">
<div class="header_sec3" style="position: inherit; opacity: 1;">
<ul class="sec3Menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">عنوان موضوع</a>
<div class="sub">
<ul class="col">
<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>
<li><a href="#">زیر عنوان موضوعات</a></li>
<li><a href="#">زیر عنوان موضوعات</a></li>
</ul>
</div>
</li>
</ul>
<form method="get" action="http://www.google.com/cse" target="_blank" name="searchfm">
<input type="hidden" name="" value="" id="pn">
<input type="text" value="جستجو ..." name="q" tabindex="99" class="input" onfocus="if 
(this.value == 'جستجو .')
 { this.value = ''; }" onblur="if (this.value == '') { this.value = 'جستجو در.'; }">
<span><input type="submit" value="جستجو"></span>
<input type="hidden" name="ie" value="UTF-8">
</form>
</div>
</div>

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

با این کد ، اگر اسکرول بار یک مقدار پایین بیاید ، منوی بالای صفحه یک مقدار محو می شود تا عناصر پشت اون قابل دیدن باشند.

تنظیم منوی آبشاری خودکار وردپرس

<?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?>

برای اطلاعات بیشتر به سایت های پیکور و w3c و wikipedia مراجعه فرمایید.

منبع:پیکور