سلام ، قصد داریم تو این نوشته کدهای منوی آبشاری ثابت بالای سایت رو به همراه آموزش و دموی سیستم که داخل این منوی ثابت ، لینک ها و موضوعات سایت و قسمت جستجو و … قرار داره رو داخل این نوشته قرار بدیم.

منظور از منوی ثابت بالای سایت چیست ؟

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

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

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


<link rel="stylesheet" type="text/css" href="http://doctorwp.com/wp-content/uploads/2013/08/menu.css">
<script type="text/javascript" src="http://doctorwp.com/wp-content/uploads/2013/08/jquery.min_.js"></script>
<script type="text/javascript" src="http://doctorwp.com/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 == &#39;جستجو .&#39;) { this.value = &#39;&#39;; }" onblur="if (this.value == &#39;&#39;) { this.value = &#39;جستجو در.&#39;; }">
<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'); ?>

پیش نمایش و دانلود ضمیمه منوی آبشاری

پیش نمایش منوی آبشاری

دانلود فایل ضمیمه

همچنین در مطالب قبلی سایت کد دکمه های ثابت کنار سایت رو قرار داده بودیم.

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 3 رای
Loading...