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

بسم الله الرحمن الرحيم

 

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

 

تعتمد هذه افضافة على تقنية CSS3 و هي فعلا جميلة يمكنك معاينة الإضافة بالظغط على الأيقونة بالأسفل.

 

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

1- توجه للوحة التحكم / تصميم / تحرير Html / و لا تنسى أخد نسخة من المدونة لو حدث أي خطأ يمكنك تذاركه.

2- إبحث عن الوسم ]]></b:skin> و ألصق الكود الموجود في الأسفل قبله تماما.

  <div dir="ltr" style="text-align: left;">/* CSS Style for Horizontal Menu - info @ http://widget-blogs.blogspot.com*/ <br />#hor { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#hor li { <br />float:left; <br />padding:5px; <br />} </p> <p>#hor a { <br />display:block; <br />height: 12px; <br />text-indent:-999em; <br />} </p> <p>#hor a.home { <br />width:46px; <br />background:url(vHome.gif) no-repeat 0 0; <br />} </p> <p>#hor a.download { <br />width:94px; <br />background:url(vDownload.gif) no-repeat 0 0; <br />} </p> <p>#hor a.contact { <br />width:74px; <br />background:url(vContact.gif) no-repeat 0 0; <br />} </p> <p>/* CSS Style for Vertical Menu */ </p> <p>#ver { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#ver li { <br />padding:2px; <br />} </p> <p>#ver li a { <br />display:block; <br />height:12px; <br />text-indent:-999em; <br />} </p> <p>#ver a.home { <br />width:47px; <br />background:url(hHome.gif) no-repeat 0 0; <br />} </p> <p>#ver a.download { <br />width:95px; <br />background:url(hDownload.gif) no-repeat 0 0; <br />} </p> <p>#ver a.contact { <br />width:74px; <br />background:url(hContact.gif) no-repeat 0 0; <br />} </p> <p>.clear { <br />clear:both; <br />} </p> <p>*{ <br />/* A universal CSS reset */ <br />margin:0; <br />padding:0; <br />} </p> <p>#navigationMenu body{ <br />font-size:14px; <br />color:#666; <br />background:#111 no-repeat; </p> <p>/* CSS3 Radial Gradients */ <br />background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); <br />background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); </p> <p>font-family:Arial, Helvetica, sans-serif; <br />} </p> <p>#navigationMenu li{ <br />list-style:none; <br />height:39px; <br />padding:2px; <br />width:40px; <br />} </p> <p>#navigationMenu span{ <br />/* Container properties */ <br />width:0; <br />left:38px; <br />padding:0; <br />position:absolute; <br />overflow:hidden; </p> <p>/* Text properties */ <br />font-family:'Myriad Pro',Arial, Helvetica, sans-serif; <br />font-size:18px; <br />font-weight:bold; <br />letter-spacing:0.6px; <br />white-space:nowrap; <br />line-height:39px; </p> <p>/* CSS3 Transition: */ <br />-webkit-transition: 0.25s; </p> <p>/* Future proofing (these do not work yet): */ <br />-moz-transition: 0.25s; <br />transition: 0.25s; <br />} </p> <p>#navigationMenu a{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFNjy4QC78lXMRzTeuAfiW4FerXQ5SXSlf2TB-SJsSCHnYt3ptqck2-cUboPwzvZmTHxsVAxfJ3NG-F-CNmCYfWq8neTtXXEWD46a-zgyXbi3JtD6v63k4rdbEtWyPfQ1Khcr3fFwIK4/s1600/navigation.jpg') no-repeat; </p> <p>height:39px; <br />width:38px; <br />display:block; <br />position:relative; <br />} </p> <p>/* General hover styles */ </p> <p>#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } <br />#navigationMenu a:hover{ <br />text-decoration:none; </p> <p>/* CSS outer glow with the box-shadow property */ <br />-moz-box-shadow:0 0 5px #9ddff5; <br />-webkit-box-shadow:0 0 5px #9ddff5; <br />box-shadow:0 0 5px #9ddff5; <br />} </p> <p>/* Green Button */ </p> <p>#navigationMenu .home { background-position:0 0;} <br />#navigationMenu .home:hover { background-position:0 -39px;} <br />#navigationMenu .home span{ <br />background-color:#7da315; <br />color:#3d4f0c; <br />text-shadow:1px 1px 0 #99bf31; <br />} </p> <p>/* Blue Button */ </p> <p>#navigationMenu .about { background-position:-38px 0;} <br />#navigationMenu .about:hover { background-position:-38px -39px;} <br />#navigationMenu .about span{ <br />background-color:#1e8bb4; <br />color:#223a44; <br />text-shadow:1px 1px 0 #44a8d0; <br />} </p> <p>/* Orange Button */ </p> <p>#navigationMenu .services { background-position:-76px 0;} <br />#navigationMenu .services:hover { background-position:-76px -39px;} <br />#navigationMenu .services span{ <br />background-color:#c86c1f; <br />color:#5a3517; <br />text-shadow:1px 1px 0 #d28344; <br />} </p> <p>/* Yellow Button */ </p> <p>#navigationMenu .portfolio { background-position:-114px 0;} <br />#navigationMenu .portfolio:hover{ background-position:-114px -39px;} <br />#navigationMenu .portfolio span{ <br />background-color:#d0a525; <br />color:#604e18; <br />text-shadow:1px 1px 0 #d8b54b; <br />} </p> <p>/* Purple Button */ </p> <p>#navigationMenu .contact { background-position:-152px 0;} <br />#navigationMenu .contact:hover { background-position:-152px -39px;} <br />#navigationMenu .contact span{ <br />background-color:#af1e83; <br />color:#460f35; <br />text-shadow:1px 1px 0 #d244a6; <br />} </p> <p>/*End menu css - info @ http://widget-blogs.blogspot.com */

3- قم بحفظ القالب الأن

4- توجه لإضافة أداة

 

5- ضع الأن الكود التالي

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://widget-blogs.blogspot.com/">
<span>الرئيسية</span>
</a>
</li>

<li>

<a class="about" href="http://widget-blogs.blogspot.com/p/blog-page_5332.html">
<span>عن المدون</span>
</a>
</li>

<li>
<a class="services" href="http://widget-blogs.blogspot.com/">
<span>خدمات</span>
</a>

</li>

<li>
<a class="portfolio" href="http://widget-blogs.blogspot.com/p/blog-page_6091.html">
<span>فهرس المدونة</span>
</a>
</li>

<li>
<a class="contact" href="http://widget-blogs.blogspot.com/p/blog-page_5585.html">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://widget-blogs.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

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

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

 

و أخيرا قم بوضع تعليقك بالأسفل

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)