آدرس لینک بک
درباره لینک بک هاآموزش پایه ای ساخت منوی همراه ، به سبک دادپرور (بسیار محبوب و کاربردی)
mehdi007
تاریخ عضویت: Nov 2013
نوشته ها: 115
ورژن من : all version
امتیاز:
(1 رای ، میانگین : 5.00 ) باسلام خدمت شما عزیزان
شاید بسیاری از عزیزانی که وارد انجمن دادپرور شدند ، منوی هدر را مشاهده کرده اند که پس از اسکرول کردن به پایین ، منو به سقف چسبیده و همراه شما می آید
برای ساخت این نوع منو ها :
ابتدا ما کد HTML منوی خود را با استفاده از لیست ها (ul) ایجاد می کنیم.
سپس کد css برای ایجاد منو را به صورت زیر ایجاد می کنیمکد PHP:<div>
<div>
<ul>
<li><a href="http://www.talar.dadparvar.ir">خانه</a></li>
<li><a href="http://talar.dadparvar.ir">تالار گفتگو</a></li>
<li><a href="http://talar.dadparvar.ir">آپلود فایل</a></li>
<li><a href="">تماس با ما</a></li>
</ul>
</div>
</div>
در کد CSS ما تمامی موارد به صورت معمول می باشند. تنها class متفاوت ps-nav می باشد که تعیین می کند منو در وضعیت fixed در بالای سایت نمایش داده شود. این کد را با استفاده از jQuery فعال و غیر فعال می کنیم.کد 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;}
در این کد مشخص می کنیم که اگر اسکرول سایت بیشتر از ۱۵۰ پیکسل پایین اورده شد . class مورد نظر ما یعنی ps-nav فعال شود. و در غیر اینصورت غیر فعال و حذف شود.کد 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>
فراموش نکنید که کد زیر را حتما در بخش <head> سایت خود فراخوانی کنید
تشکر یادت نره ffکد PHP:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
موفق باشی
ویرایش توسط mehdi007 : 2013/11/10 در ساعت 11:04 AM
علاقه مندی ها (Bookmarks)