قائمة Css3 أحترافية بتأثير hover

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

القائمة احترافية جدآ مكونة من Css3 بتأثير hover المتحرك وتحركاتها شبيه بتقنية الجي كيوري تصلح وضعها في شريط الجانبي أو في الفوتر

معاينة الاضافة :

طريقة تركيب :

1. ادخل لوحة التحكم 
2. التخطيط + أضف اداة جافا سكربت 
3. وضع الكود التالي 

<style>
body{
  background:rgba(17, 17, 17, 0)  url(http://engcv.com/example/img/pattern_40.gif);
  direction: rtl;
}

/* CSS3 TRANSITION ONLY EFFECT */
#panel {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}

#panel li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid rgba(17, 17, 17, 0) ; border-top:1px solid rgba(17, 17, 17, 0); border-right:1px solid #333; border-bottom:1px solid #333;
}

#panel li a {
color:#fff;
display:block;
padding:10px;
    text-decoration: none;
}

#panel li a:hover {
color:#00c6ff;
}

#panel li.animation {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}

#panel li.animation:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}
</style>

<div style="text-align: center;"><a href="/" style="text-decoration: none;color: #fff; font-size: 12px;">وصلات</a></div>
<ul id="panel">

   
<li class="animation"><a href="http://tech7yatak.blogspot.com/">التقنية حياتك</a></li>
   
<li class="animation"><a href="#">الرابط 2</a></li>
   
<li class="animation"><a href="#">الرابط 3</a></li>
   
<li class="animation"><a href="#">الرابط 4</a></li>
   
<li class="animation"><a href="#">الرابط 5</a></li>
</ul>

لاتنسى تعديل على نصوص و روابط ^^