-
July 13th, 2013, 11:16
#1
آموزش ساخت منوی شناور با CSS و jQuery
در ابتدا ما کد HTML منوی خود را با استفاده از لیست ها (ul) ایجاد می کنیم.
<div> <div> <ul> <li><a href="http://www.persianscript.ir">خانه</a></li> <li><a href="http://forum.persianscript.ir">تالار گفتگو</a></li> <li><a href="http://up.persianscript.ir">آپلود فایل</a></li> <li><a href="">تماس با ما</a></li> </ul> </div> </div> سپس کد css برای ایجاد منو را به صورت زیر ایجاد می کنیم.
.nav-container{ background:#000;} .ps-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;} /* this make our menu float top */ .nav { height: 29px;} .nav ul { list-style: none; } .nav ul li{float: right; padding: 6px; border-left: 1px solid #ACACAC;} .nav ul li:first-child{ padding-right: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: none;color:#ccc;} در کد CSS ما تمامی موارد به صورت معمول می باشند. تنها class متفاوت ps-nav می باشد که تعیین می کند منو در وضعیت fixed در بالای سایت نمایش داده شود. این کد را با استفاده از jQuery فعال و غیر فعال می کنیم.
کد جاوای ما به صورت زیر است.
<script type="text/javascript"> var _rys = jQuery.noConflict(); _rys("document").ready(function(){ _rys(window).scroll(function () { if (_rys(this).scrollTop() > 150) { _rys('.nav-container').addClass("ps-nav"); } else { _rys('.nav-container').removeClass("ps-nav"); } }); }); </script> در این کد مشخص می کنیم که اگر اسکرول سایت بیشتر از ۱۵۰ پیکسل پایین اورده شد . class مورد نظر ما یعنی ps-nav فعال شود. و در غیر اینصورت غیر فعال و حذف شود.
فراموش نکنید که کد زیر را حتما در بخش <head> سایت خود فراخوانی کنید
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
نوشته شدن توسط پرشین اسکریپت
-
تعداد تشکر ها از negin.server به دلیل پست مفید
-
July 13th, 2013 11:16
# ADS
-
July 13th, 2013, 12:41
#2
عضو جدید
پاسخ : آموزش ساخت منوی شناور با CSS و jQuery
در ابتدا ما کد HTML منوی خود را با استفاده از لیست ها (ul) ایجاد می کنیم.
کد PHP:
<div> <div> <ul> <li><a rel="nofollow" href="http://www.persianscript.ir">خانه</a></li> <li><a rel="nofollow" href="http://forum.persianscript.ir">تالار گفتگو</a></li> <li><a rel="nofollow" href="http://up.persianscript.ir">آپلود فایل</a></li> <li><a href="">تماس با ما</a></li> </ul> </div> </div>
سپس کد css برای ایجاد منو را به صورت زیر ایجاد می کنیم.
کد PHP:
.nav-container{ background:#000;} .ps-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;} /* this make our menu float top */ .nav { height: 29px;} .nav ul { list-style: none; } .nav ul li{float: right; padding: 6px; border-left: 1px solid #ACACAC;} .nav ul li:first-child{ padding-right: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: none;color:#ccc;}
در کد CSS ما تمامی موارد به صورت معمول می باشند. تنها class متفاوت ps-nav می باشد که تعیین می کند منو در وضعیت fixed در بالای سایت نمایش داده شود. این کد را با استفاده از jQuery فعال و غیر فعال می کنیم.
کد جاوای ما به صورت زیر است.
کد PHP:
<script type="text/javascript"> var _rys = jQuery.noConflict(); _rys("document").ready(function(){ _rys(window).scroll(function () { if (_rys(this).scrollTop() > 150) { _rys('.nav-container').addClass("ps-nav"); } else { _rys('.nav-container').removeClass("ps-nav"); } }); }); </script>
در این کد مشخص می کنیم که اگر اسکرول سایت بیشتر از ۱۵۰ پیکسل پایین اورده شد . class مورد نظر ما یعنی ps-nav فعال شود. و در غیر اینصورت غیر فعال و حذف شود.
فراموش نکنید که کد زیر را حتما در بخش <head> سایت خود فراخوانی کنید
کد PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
نوشته شدن توسط پرشین اسکریپت
تگ گزاری شد توسط interhost | اینترهاست - اعضا
-
پاسخ با نقل قول