mahdi71

آموزش ساخت اسکرول برو بالا سایت به شکل زیبا :25:

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

سلام بر کاربران گرامی جوملا

امروز میخوام ساخت یه اسکرول برو بالا سایت رو بهتون آموزش بدم خوب بریم سراغ آموزش

1-درون کد قالب به دنبال کد <body> بگردید و بعد از آن کد زیر را قرار دهید.

کدHTML

<div id="scrollTop" style="display:none;">
<div class="level-2"></div>
<div class="level-3"></div>
</div>

کد css

#scrollTop  div{
   width:149px;
   overflow: hidden;
   margin:0px;
   padding:0px;
   position:absolute;
   left:0;
   top:0;
}
#scrollTop  .level-2{
   background:url(rocket_button_up.png) no-repeat -149px 0px;
   opacity:0;
   height:250px;
   display:none;
   z-index:1;
}
#scrollTop  .level-3{
   background:transparent;
   cursor:pointer;
   display:block;
   z-index:2;
   height:150px;
}
#scrollTop{
   z-index:11;
   width:149px;
   height:250px;
   display:block;
   overflow: hidden;
   margin:0px;
   padding:0px;
   cursor:default;
   position:fixed;
   right:0;
   top:50%;
   margin-top:-125px;
   background:url(rocket_button_up.png) no-repeat 0 0;
}

کد JS

function pageInit(){
   menuSelected=2;
   initDisplayStyleBtns();
}
function initDisplayStyleBtns(){
   $('#display-style-btns div').click(function(){
       classes = ['large','large_active','small','small_active'];
       other = (this.className==classes[0])?classes[3]:classes[1];
       other_will = (this.className==classes[0])?classes[2]:classes[0];
       $('#display-style-btns div.'+other)[0].className=other_will;
       this.className = (this.className==classes[0])?classes[1]:classes[3];
   });
}
function loadProjects(){  
}
function loadNextProject(){
}

دانــــلــــود دمو

Share this post


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

ممنون از آموزشتون ولی اگر یه دموی آنلاین یا حداق تصویری ازش قرار بدین فکر کنم بهتر باشه

Share this post


Link to post
Share on other sites
خب این چه کاریه! :D

اینجا پلاگین هاش هست می تونید استفاده کنید:

http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation

در هر حالتی دوست عزیزمون mahdi71 زحمت کشید و این آموزش رو تهیه کردن و تو انجمن قرار دادن . به هرحال تلاش ایشون جای تشکر داره و اینطور صحبت که کار کسی رو بیهوده بخونین کار درستی نیست . شما به اندازه علم خودتون و دیگران هم به اندازه توانایی خودشون ، هرکسی سهمی داره . شاید اصلا کسی بخواد بدونه این سیستم چجوری درست شده پس جای تشکر داره . بنظرم کارش خیلی ارزشش بیشتر از اینه که ادم یه لینک رو کپی کنه بذاره اینجا علی علی .

لطفا احترام گذاشتن به هرکس در هر شرایطی فراموش نشه

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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