تابعنا على الفيس بوك

اضافة قائمة جانبية أنيقة و جميلة بتقنية 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- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة


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

اهلا وسهلا بكم في مدونة هكر العراق
(احترم تحترم) مع تحيات فريق جيوش هكر العراق خارج الموضوع تحويل الاكوادإخفاء الابتساماتإخفاء

شكرا لتعليقك