اضافة قائمة جانبية أنيقة و جميلة بتقنية CSS

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

view demo

طريقة تركيب الإضافة

 خد نسخة احتياطيه من قالب المدونة من اجل لو حدث أي خطأ يمكنك تداركه

1- من لوحة التحكم  / تصميم / تحرير Html
2-قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
 .

]]></b:skin>
والصق الكود التالي قبله تمامآ

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}
/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

انتقل إلى لوحة تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ثم قم بلصق الكود التالي :



<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://alb33dani.blogspot.com">
<span>الرئيسية</span>
</a>
</li> <li>
<a class="about" href="http://j3l3l.blogspot.com/">
<span>عن المدون</span>
</a>
</li>
<li>
<a class="services" href="http://alb33dani.blogspot.com">
<span>خدمات</span>
</a>
</li>
<li>
<a class="portfolio" href="http://alb33dani.blogspot.com/p/blog-page.html">
<span>فهرس المدونة</span>
</a>
</li>
<li>
<a class="contact" href="http://alb33dani.blogspot.com/p/blog-page_6165.html">
<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://alb33dani.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>



6- قم بتغير ما هو باللون الأحمر بروابط مدونتك، و إن أردت قم بتغير ما هو باللون الأخظر بالكلمات التي تريد.

7- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة


و أخيراذا نججت في تركيب هذه الاضافه لاتبخل بمشاركة الموضوع

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

  1. غير معرف1/8/12 05:55

    يعطيك الف عافيه اضافه جميله وشرح واضح ومختصر

    ردحذف
    الردود
    1. الله يعافيك اخوي بس ياريت تسجل الدخول في المره المقبله

      حذف
  2. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  3. @gharip
    العفو اخي شكرا لمرورك

    ردحذف
  4. يسلو ايديك والله يوفقك

    ردحذف
  5. @smadi امين وياك اخي ربي يسلمك ويحفظك من كل شر شكرا لمرورك

    ردحذف
  6. مشكوووووووووور أخي الكريم :)

    ردحذف
  7. غير معرف5/8/13 14:23

    مشكور
    بس ممكن تعيد الشرح بالصور لانه يطلعلي ذا :
    http://im42.gulfup.com/haBjB.gif

    وشكرا

    ردحذف
    الردود
    1. اخي تاكيد من نسخ الكود الاول بطريقه سليمه
      الخاص بوسم ]]></b:skin>

      حذف
  8. غير معرف5/8/13 19:36

    طيب صح علي كذا ؟؟
    http://im35.gulfup.com/KNuSg.gif
    وشكرا

    ردحذف
    الردود
    1. نعم اخي هذا الكود صحيح
      عموما اخي اذا ما ظهرت معك الاضافه بشكل سليم يمكنك ارسال قالبك على ايميلي alb33dani@yahoo.com وسوف اقوم باضافة هذه القائمه الى قالبك

      حذف
  9. غير معرف6/8/13 11:05

    آهى طيب ارسلت لك القالب على ايميلك وشكرا على المساعده

    ردحذف
    الردود
    1. تم اضافة القائمه الى القالب وتركيبه على مدونتك

      حذف
  10. غير معرف6/8/13 18:27

    مشكور وما قصرت بس ممكن اعرف ليش ما ضبط يوم ركبته..؟؟
    وعذرا على الازعاج وتحياتي ...

    ردحذف
    الردود
    1. انتي قمتي باضافة الكود بطريقه سليمه ولكن اكواد قالبك الخاصه بالـskin لاتتوافق مع الاضافه عشان كذه ماضبط معاكي الكود

      حذف
  11. اخي عندي اول اختيارين لم استطيع الضغط عليهم للانتقال الى الصفحه ارجو منك التوضيح السبب
    وباقي الاختيارات استطيع الضغط عليهم
    وتقبل تحياتي وشكراااا لك استقدت كثيراااا من مدونتك

    ردحذف
    الردود
    1. قد يكون هذا بسبب تداخل القائمه مع اضافة المواقع الاجتماعيه العائمه التي في مدونتك

      حذف
  12. طب اخي وما الحل

    ردحذف
  13. اخي الكريم انا ابحث عن هذا الكلمة لكن لا اجده ارجو الجواب

    ردحذف
  14. (h) (h) (h) (h) تحياتي لك

    ردحذف
  15. يعطيك الله العافيه

    ردحذف
  16. شرح سهل جدا :D واضافة جد رائعة (o)

    ردحذف