قائمتين مميزتان لتسهيل المهام

شارك هذا:


نقدم بين يديكم  قائمتين رائعتين مميزتان تصلح لكافة الأعمال وتتناسق مع أي قالب، وسهولة عملها يمكنك استخدامها للوصول إلى صفحة معينة  ... ببساطة تامة . 
القائمة المستديرة لأنها تبقى ثابتةً في مكانها... تشمل الإضافاتين تأثيرات رائعة وتركيبها سهل لذا بدون أي كلمات آخرى أترككم لمعاينتها وتجربتها


شرح طريقة التركيب

1 . من التخطيط أضف أداة Html/Javascript وضع بها كود القائمة المختارة
<div class="ar1webmb"> <input type="checkbox" id="tm" /> <!-- The menu --> <ul class="sidenav"> <li><a href="#"><i class="fa fa-check"></i><b>المهام</b></a></li> <li><a href="#"><i class="fa fa-inbox"></i><b>الرسائل</b></a></li> <li><a href="#"><i class="fa fa-pencil"></i><b>المواضيع الجديدة</b></a></li> <li><a href="#"><i class="fa fa-cog"></i><b>الإعدادات</b></a></li> <li><a href="#"><i class="fa fa-star"></i><b>جديد المدونة</b></a></li> <li><a href="#"><i class="fa fa-power-off"></i><b>تسجيل الخروج</b></a></li> </ul> <section> <!-- Label for #tm checkbox --> <label for="tm">القائمة<br/> ~ إضغط عليّ ~ </label> </section> </div> <style> @import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300); #addku1,#addku2 {display:none;} .ar1webmb { float: none; position: relative; overflow: hidden; } #tm { display: none; } .ar1webmb section { background: url("http://3.bp.blogspot.com/-YOrUvAOGxpw/Vd3Wf8IaXtI/AAAAAAAAIf0/OXbB6V72x4M/s1600/ar1web44.jpg"); width: 300px; height: 500px; position: relative; transition: all 0.25s;background-size: cover; box-shadow: 0 0 10px 0px #000000; } .ar1webmb section label { color: white; font: bold 22px 'Adobe Arabic','serif'; text-align: center; border: 2px solid white; display: block; padding: 6px 0; width: 60%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; background-color: rgba(49, 46, 47, 0.36); } .sidenav { background: rgb(169, 106, 70); width: 160px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px; } .sidenav li { list-style-type: none;padding-right: 19px; } .sidenav a { color: white; text-decoration: none; } .sidenav b { font: bold 19px/48px 'Adobe Arabic','serif'; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s; } .sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center; } #tm:checked ~ section { transform: translateX(160px); } #tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0); } #tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s; } #tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s; } #tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s; } #tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s; } #tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s; } #tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s; } </style> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
تخصيص القائمة :
المحدد بالأحمر # يغير بالرابط
المحدد بالبرتقالي يخص الأيقونات "الموقع"
المحدد بالوردي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة
المحدد بالأزرق يخص لون الخلفية



 <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="#" 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="#" 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="#" 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="#" 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="#" 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://callmenick.com/_development/css-circle-menu/js/circleMenu.min.js"></script>
تخصيص القائمة :
المحدد بالأحمر # يغير بالرابط
المحدد بالأخضر يخص رابط صور الأيقونات


شارك هذا:

بلوجر

اضف تعليق:

0 تعليقات:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1_ان يكون التعليق يخص محتوى الموضوع
2_ان لا يحتوي التعليق اى روابط دون داعي
3_أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
شكرا