babakmohamadi

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

12 پست در این موضوع

با سلام

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

دموی وبسایت

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

دمو وبسایت

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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

درود

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

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;
}


Share this post


Link to post
Share on other sites

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

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

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

http://www.rockettheme.com/

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

سلام

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

اون افکت از دو بخش تشکیل شده. یکی بخش حرکتی هست که با خاصیت 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> قرار بگیره.

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

موفق باشید.

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری