قائمة احترافية منبثقة على شكل دوائر

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

معاينة القائمة

بعد معاينة القائمة حان الوقت لطريقة التركيب والإستخدام

طريقة الإستخدام :

1- ابحث عن ]]></b:skin> وأضف فوقه الكود التالي :

.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;
 position:absolute;
 z-index:90;
 margin:0;
 padding:0
}
.c-circle-nav__item
{
 display:block;
 position:absolute;
 top:0;
 right: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
}
.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;
 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
}

}
.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;
 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
}

}
.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
}
.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
}
.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
}

2- ابحث عن </body> وأضف فوقه الكود التالي :

<script>
(function() {

  "use strict";

  /**
   * Cache variables
   */
  var menu = document.querySelector("#c-circle-nav");
  var toggle = document.querySelector("#c-circle-nav__toggle");
  var mask = document.createElement("div");
  var activeClass = "is-active";

  /**
   * Create mask
   */
  mask.classList.add("c-mask");
  document.body.appendChild(mask);

  /**
   * Listen for clicks on the toggle
   */
  toggle.addEventListener("click", function(e) {
    e.preventDefault();
    toggle.classList.contains(activeClass) ? deactivateMenu() : activateMenu();
  });

  /**
   * Listen for clicks on the mask, which should close the menu
   */
  mask.addEventListener("click", function() {
    deactivateMenu();
    console.log('click');
  });

  /**
   * Activate the menu 
   */
  function activateMenu() {
    menu.classList.add(activeClass);
    toggle.classList.add(activeClass);
    mask.classList.add(activeClass);
  }

  /**
   * Deactivate the menu 
   */
  function deactivateMenu() {
    menu.classList.remove(activeClass);
    toggle.classList.remove(activeClass);
    mask.classList.remove(activeClass);
  }

})();
</script>

3- بقيت خطوة واحدة وهي إضافة كود HTML الإضافة ويمكنك إضافته في أي مكان أردت :

<nav id="c-circle-nav" class="c-circle-nav">
  <button id="c-circle-nav__toggle" class="c-circle-nav__toggle">
    <span>القائمة</span>
  </button>
  <ul class="c-circle-nav__items">
    <li class="c-circle-nav__item">
      <a href="http://www.mtawroon.com/" class="c-circle-nav__link">
        <img src="https://dl.dropboxusercontent.com/u/280199022/svg/house.svg" alt=""/>
      </a>
    </li>
<li class="c-circle-nav__item">
      <a href="http://www.mtawroon.com/" class="c-circle-nav__link">
        <img src="https://dl.dropboxusercontent.com/u/280199022/svg/photo.svg" alt=""/>
      </a>
    </li>
<li class="c-circle-nav__item">
      <a href="http://www.mtawroon.com/" class="c-circle-nav__link">
        <img src="https://dl.dropboxusercontent.com/u/280199022/svg/pin.svg" alt=""/>
      </a>
    </li>
<li class="c-circle-nav__item">
      <a href="http://www.mtawroon.com/" class="c-circle-nav__link">
        <img src="https://dl.dropboxusercontent.com/u/280199022/svg/search.svg" alt=""/>
      </a>
    </li>
<li class="c-circle-nav__item">
      <a href="http://www.mtawroon.com/" class="c-circle-nav__link">
        <img src="https://dl.dropboxusercontent.com/u/280199022/svg/tools.svg" alt=""/>
      </a>
    </li>
  </ul>
</nav>

لا تنسى تغيير الروابط بما يناسبك.

وبنفس الطريقة يمكنك إضافة القائمة إلى أي موقع كان وذلك عن طريق وضع الأكود في مكانها المناسب.

كنتم مع درس قدمنا لكم فيه قائمة احترافية منبثقة على شكل دوائر أتمنى أن تدعمونا بنشر الموضوع إلى اللقاء

مطورون - نسعى لتطوير الويب العربي

الأربعاء، 29 أبريل 2015

قائمة احترافية منبثقة على شكل دوائر

ليست هناك تعليقات:

إرسال تعليق

Popular Posts