ثابت کردن منوی سایت

[babakmohamadi 10]

با سلام

من یه سوالی در مورد قسمت منوی وبسایت داشتم که مبنی بر این موضوع است که با استفاده از چه کدنویسی می توانم منوی وبسایت رو شبیه به وبسایت زیر نمایم؟

دموی وبسایت

من منوی وبسایت خودم رو تا حدودی تنظیماتی رو اعمال کردم ولی می خواستم به صورت نمونه بالا تغییرات رو اعمال کنم

دمو وبسایت

پیشا پیش از راهنمایی دوستان و اساتید سپاسگذارم.../

[babakmohamadi 10]

از دوستان واساتید کسی نیست به این سوال ما پاسخی ارائه دهد!!!!

[memary-spam 10]

.............

ویرایش شده در دی 93 توسط memary-spam

[amir_seddighi 146]

درود

این فایل رو باز کنید :

templates / tearleaf / css / template_rtl.css

خط مربوط به منو به شکل زیره :

#ttr_menu_inner_in {
   height: 43px;
   margin: 0 auto;
   position: relative;
   text-align: right;
   width: 1024px;

اینجوری تغییرش بدید :

#ttr_menu_inner_in {
   height: 43px;
   margin: 0 auto;
   position: fixed;
   text-align: right;
   width: 1024px;


   background: #000000;
   z-index: 1000;
}

[babakmohamadi 10]

من قبلا منوی وبسایت رو fixed کردم !!!!

مشکل من جای دیگه ای هست.

لطفا به منوی وبسایت زیر توجه بکنید.... ملاحظه می کنید که وقتی به پایین اسکرول می کنیم ,منوی به هنگام پایین آمدن به صورت کشوئی به بالا حرکت می کند و وقتی از پایین به بالا اسکرول می کنیم منوی وبسایت به صورت کشویی به پایین حرکت کرده و نمایش داده می شود.....

http://www.rockettheme.com/

[babakmohamadi 10]

از اساتید کسی نیست ما رو در این مورد راهنمایی کنه ؟؟؟؟

انشاالله اجرکم عند الله....

[topmihan 11]

سلام

دوست عزیز اگه فقط میخواین منو ثابت بشه

چون بالاتر از اون موقعیت هدر رو دارین بخوبی کار نمیده

در غیر اینصورت موقعیت هدر و منو رو هر دو رو داخل یک دایو مادر بذارید تا هر دو ثابت بشن

تا تست کنم و خبر بدم چه کدی باید بذارین

[babakmohamadi 10]

درود بر شما .....

نه نمیخام هدر وبسایت به صورت ثابت باشه !!!!

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

[babakmohamadi 10]

از اساتید کسی نبود ........

راهنمایی کنید ......لطفا , بی زحمت , خواهشا.....

[babakmohamadi 10]

کسی به این پست ما هم جواب بده !!!

لطفا!!!!

[mmfallah 67]

باید کدهاش بررسی بشه. یه فایل براتون میفرستم این سبک توش هست. به کد نویسیش دقت کنید و مشابهش را بزارید.

[Vahid Taheri 74]

اون افکت از دو بخش تشکیل شده. یکی بخش حرکتی هست که با خاصیت animation در css3 ساخته شده و بخش دیگرش دستور شرطی هست که با javascript نوشته شده.

بخش اول رو که با کپی کردن سورس میشه درستش کرد ولی بخش دوم که javascript هست پیاده سازیش روی سایت شما دشواره. اما هدس میزنم با دستور شرطی مثل اون چیزی که برای ثابت شدن منو قرار دادین بشه ساختش.

اینم هم سورس های مورد نیاز :

css :

@keyframes slideDown {
0% {
	transform: translateY(-120px);
}
100% {
	transform: translateY(0px);
}
}
@keyframes slideUp {
0% {
   transform: translateY(0px);
}
100% {
   transform: translateY(-120px);
}
}

#rt-top-surround.animated {
   animation-duration: 0.5s;
   animation-fill-mode: both;
}
#rt-top-surround.animated.slideDown {
   animation-name: slideDown;
}
#rt-top-surround.animated.slideUp {
   animation-name: slideUp;
}

جای #rt-top-surround کلاس یا شناسه بخشی که میخواد این افکت رو بگیره بزارید ( مثلا #ttr_header )

سورس Javascript :

jQuery("document").ready(function($){	
/*Dynamic top menu positioning**/
var num = 50; //number of pixels before modifying styles
$(window).bind('scroll', function () {
   if ($(window).scrollTop() > num) {
       $('#ttr_header').addClass('slideUp');
   } elseif ($(window).scrollTop() < num){
	$('#ttr_header').addClass('slideDown');
}

اینجا خودم شناسه ها رو گذاشتم ولی اگر دیدین درست نیست تغییرش بدین. یادتون باشه که این کد باید در پوشش تگ <script> قرار بگیره.

امیدوارم که این کد کاری رو که میخواین انجام بده.

موفق باشید.