الأربعاء، 22 نوفمبر 2017

احصل على هذة الاداة من هنا

قائمة احترافية بتقنية css3



السلام عليكم ورحمة
الله وبركاته
--
نقدم لكم في هذه التدوينة قائمة تنسدل بتاثير احترافي بتقنية css3




طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي في المكان الذي يناسبك ((القائمة))
<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
  </label>
  
  <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>

</nav>
<!-- filters -->
<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="shadowed-goo">
          
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feBlend in2="shadow" in="goo" result="goo" />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
    </defs>
</svg>

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    .menu { filter: url("#shadowed-goo"); } .menu-item, .menu-open-button { background: #ff4081; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; top: 20px; color: white; text-align: center; line-height: 80px; transform: translate3d(0, 0, 0); transition: transform ease-out 200ms; } .menu-open { display: none; } .hamburger { width: 25px; height: 3px; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; transition: transform 200ms; } .hamburger-1 { transform: translate3d(0, -8px, 0); } .hamburger-2 { transform: translate3d(0, 0, 0); } .hamburger-3 { transform: translate3d(0, 8px, 0); } .menu-open:checked + .menu-open-button .hamburger-1 { transform: translate3d(0, 0, 0) rotate(45deg); } .menu-open:checked + .menu-open-button .hamburger-2 { transform: translate3d(0, 0, 0) scale(0.1, 1); } .menu-open:checked + .menu-open-button .hamburger-3 { transform: translate3d(0, 0, 0) rotate(-45deg); } .menu { position: absolute; left: 50%; margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: left; } .menu-item:hover { background: white; color: #ff4081; } .menu-item:nth-child(3) { transition-duration: 70ms; } .menu-item:nth-child(4) { transition-duration: 130ms; } .menu-item:nth-child(5) { transition-duration: 190ms; } .menu-item:nth-child(6) { transition-duration: 250ms; } .menu-item:nth-child(7) { transition-duration: 310ms; } .menu-open-button { z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 200ms; transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 160ms; transform: translate3d(114.42548px, 11.48084px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 240ms; transform: translate3d(77.18543px, 85.2491px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 320ms; transform: translate3d(0.09158px, 114.99996px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 400ms; transform: translate3d(-77.04956px, 85.37192px, 0); } .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 480ms; transform: translate3d(-114.40705px, 11.66307px, 0); }
    
      1. الرابط الذي يؤدي اليه الزر
      2.  ايقونة الزر


    EmoticonEmoticon