مشورت در مورد موقعیتهای شناور

[sajjad salehi]

خب اگه مدیرها اجازه ویرایش پست اول رو بدن کم کم تکمیلش میکنم
یه کد نوشتم برای افزایش متحرک ارتفاع موقعیت ، به راحتی قابلیت تغییر عرض رنگ چرخش و ... رو هم داره . بدون هیچ کد جاوا تماما css . کافیه ماوس بر روی هدر ماژول قرار بگیره تا ماژولبه آرامی باز بشه و محتوا رو نمایش بده .
ابتدا
در مدیریت ماژول جوملا ماژول کلاس ماژول یا شناسه ماژول رو به scrol تغییر بدین .
بعد
این کدها رو به آخر template .css قالبتون اضافه کنید .

کد: (انتخاب همه)

scrol {
    width: 96%;
    position:absolute;
    overflow: hidden;
    background:  #FF3;
    -webkit-transition: max-height 2s ease-out .1s;
    -moz-transition: max-height 2s ease-out .1s;
    transition: max-height 2s ease-out .1s;
    -ms-transition: max-height 2s ease-out .1s;
    -o-transition: max-height 2s ease-out .1s;
    max-height: 70px;
   bottom: 20%;
right:  2%;
transition-property: all;
-webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
border:3px;
border-bottom:none;
        }
        scrol:hover {
            background:   #6F6;
            
     z-index: 99;
    max-height:  600px;
            }

توضیحات کد
z-index رو طوری تنظیم کنید که از بقیه ماژولهای اطراف بیشتر باشه .
width خب تنظیماتی مثل عرض ارتفاع و رنگ بستگی داره به کدهای دایوهای مادر و در قالبهای مختلف فرق میکنه و حتی ممکنه با نصب افزونه فرق کنه . به صورت دستی تنظیمش کنید . ممکنه وقتی روی 20% تنظیم میکنید عرض صفحه رو در نظر بگره ممکنه عرض کادر ی که ماژول درش قرار داره .

کد: (انتخاب همه)

-webkit-transition: max-height 2s ease-out .1s;
    -moz-transition: max-height 2s ease-out .1s;
    transition: max-height 2s ease-out .1s;
    -ms-transition: max-height 2s ease-out .1s;
    -o-transition: max-height 2s ease-out .1s;
    transition-property: all;

این خاصیت متحرک رو اجاد میکنه . یک خطش در مرورگهای پیشرفته کافیه ولی بقیه برای مرورگرهای مختلفه .
bottom
این یکی هم نقطه ی شروع رو معلوم میکنه احتمالا نیاز نباشه بسته به کدهای دیگه قالبتون . من برای یه موقعیت شناور این ور گذاشتم که کفش معلوم نبود. 20% عرض صفحه میاره بالا
right: 2%; چون عرضش 96 درصد عرض کادره این در هر دو طرف 2% فضای خالی میگذاره