Eslam Love
عضو مشارك
تاريخ التسجيل : 20/04/2016 عدد المساهمات : 60 التقييم : 23 العمر : 28 البلد : مصر
| موضوع: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 14.06.16 10:22 | |
| اليوم نأتي بكود جميل ومميز وراااااااااااااااااائع جبار وخيالي حصريا لاول مرة على أحلى منتدىصورة قبل الضغط :
لوحة الإدارة / مظهر المنتدى / التومبيلات و القوالب / ادارة عامة تم الى قالب الهيدر : overall_headerنبحث عن - اقتباس :
- {JAVASCRIPT}
ونضيف اسفله مباشرة الكود التالي - الكود:
-
<style> .c-circle-nav__toggle,.c-circle-nav__toggle span{transition:background .3s;-webkit-transition:background .3s}.c-circle-nav{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px)and (min-height:480px){.c-circle-nav{width:96px;height:96px;border-radius:48px}}.c-circle-nav__items{display:block;list-style:none;z-index:90;margin:0;padding:0}.c-circle-nav__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-nav__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-nav__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-nav__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-nav__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-nav.is-active .c-circle-nav__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);-ms-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px)and (min-height:480px){.c-circle-nav__item{width:96px;height:96px;border-radius:48px!important}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transform:translate(-288px,0);-ms-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);-ms-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transform:translate(-267px,-111px);-ms-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);-ms-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transform:translate(-204px,-204px);-ms-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);-ms-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transform:translate(-111px,-267px);-ms-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);-ms-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-nav__link{display:block;width:100%;height:100%;border-radius:24px!important;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transform:translate(0,-288px);-ms-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-nav__link{border-radius:48px!important}}.c-circle-nav__link img{display:block;max-width:100%;height:auto}.c-circle-nav__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-nav__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px!important;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle{width:96px;height:96px;border-radius:48px!important}}.c-circle-nav__toggle.is-active,.c-circle-nav__toggle:focus,.c-circle-nav__toggle:hover{outline:0;background-color:#c10012}.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px!important}.c-circle-nav__toggle span{top:22px;left:10px;right:10px}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{height:8px;border-radius:2px!important}.c-circle-nav__toggle span{top:44px;left:20px;right:20px}}.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-nav__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.c-circle-nav__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span::before{top:-16px}.c-circle-nav__toggle span::after{bottom:-16px}}.c-circle-nav__toggle.is-active span{background:0 0}.c-circle-nav__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-nav__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-mask{position:fixed;top:0;left:0;z-index:900;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-mask.is-active{opacity:1;visibility:visible}
</style> <nav id="c-circle-nav" class="c-circle-nav"> <button id="c-circle-nav__toggle" class="c-circle-nav__toggle"> <span>Toggle</span> </button> <ul class="c-circle-nav__items"> <li class="c-circle-nav__item"> <a href="/forum" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/house.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="profile?mode=editprofile&page_profil=avatars" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/photo.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="viewonline" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/pin.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="search" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/search.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="profile?mode=editprofile" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/tools.svg" alt="" /> </a> </li> </ul> </nav> <script src="http://yassine-bablil.allgoo.net/10294.js"></script> | |
|
هديل19
عضو جديد
تاريخ التسجيل : 15/06/2016 عدد المساهمات : 9 التقييم : 10 العمر : 23 البلد : الجزائر
| موضوع: رد: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 15.06.16 2:27 | |
| | |
|
ɪ ℓσvє мy ℓɪfє
عضو جديد
تاريخ التسجيل : 16/06/2016 عدد المساهمات : 2 التقييم : 10 البلد : الجزائر
| موضوع: رد: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 16.06.16 9:58 | |
| | |
|
Ranocha mimi
عضو مشارك
تاريخ التسجيل : 15/06/2016 عدد المساهمات : 90 التقييم : 28 البلد : الارض بين الكواكب
| موضوع: رد: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 16.06.16 12:04 | |
| | |
|
Mr.habadi
عضو جديد
تاريخ التسجيل : 14/06/2016 عدد المساهمات : 23 التقييم : 10 العمر : 22 البلد : الجزائر
| موضوع: رد: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 16.06.16 18:49 | |
| برك الله فيك
وعلى طرحك الرائع | |
|
البراق
عضو جديد
تاريخ التسجيل : 24/06/2016 عدد المساهمات : 31 التقييم : 10 البلد : العراق
| موضوع: رد: اداة في أسفل المنتدى تلقائية العمل بشكل احترافي 24.06.16 22:19 | |
| تراتيل شكر من قبل ومن بعد ولا تكفي موضوع جميل وطرح اجمل !!!
آرق التحيه | |
|