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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

معاينة

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

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0pH4xGBFOgMxOj6U1K9RSls8989DJnjZlhXWTUsNF9miH2G-OxUTKnkpcG8GmnLgaYWJmG10_dcj6muFj1FIWz506tOYNtljEIkAW1WI6jLbPlvPG_Uva4MLCNRKSxeEz_vf0QGBUWmo/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>

تخصيص القائمة :

المحدد بالأحمر # يغير بالرابط

المحدد بالأخضر يخص رابط صور الأيقونات

ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 18 تعليقًا:

Unknown8/26/2015
رائع هل يمكن ان أظيفه في قالب intime
ردحذف
الردود
android tv8/26/2015
chokran
ردحذف
الردود
Unknown8/26/2015
اضافة رائعه
ممكن عمل شرح كيفية وضع قسم التدوينات في نفس المدونة لكن يكون حسب التصنيف الذي انا اضعه
يعني يكول اخر الاخبار و تحتة قسم القوالب يكون نفس ترتيب اخر الاخبار لكن انا اضع له تصنيف خاص به وشكرا
ردحذف
الردود
Walid8/26/2015
اضافة رائعه
ردحذف
الردود
wahatifno8/26/2015
سلام اخ حسام اريد في ان تريني كيف اضيف احدى اضافات الموجودة بقالبك وسأعطيك 2دولاركهدية بسيطة واتمنى ان تتقبل مروري ان اردت ضع حسابك الشخصي
#الدفع سيكون اولا لكي لا تظن اني نصاب
ردحذف
الردود
اسعد القيسي8/27/2015
شكرااا اخي
ردحذف
الردود
Unknown9/18/2015
كيف اضع كود تخصيص القائمة . اضع الكود وين ؟
ردحذف
الردود
yahya habki11/02/2015
السلام اخي الكريم انا اشكر كتيرا على شروحات الرائعة
اخي اني اواجه صعوبة في تغير الايقونة
ردحذف
الردود
mohamed alilou5/08/2016
top
ردحذف
الردود
غير معرف7/02/2016
كيف اخليه حضرتك يعمل مهمة كل اداة
يعني ف المعاينة بدوس ع السيرش ما بيظهر مربع او بيعمل شي
ارجو الرد سريعا وشكرا
ردحذف
الردود
Diagoo10/21/2016
هل ممكن تعديل الاضافه لتصبح اصغر قليلا
مثلا 50x50
ردحذف
الردود
روائع المونتاج7/31/2018
السلام عليكم القائمة الثانية لا تعمل ممكن حل
ردحذف
الردود