شرح وافى لكيفية عمل قائمة احترافيه للصفحات كالتى فى مدونتنا

السلام عليكم ورحمة الله وبركاته

بعض طلب من أحد الأعضاء عن كيفية عمل قائمة الصفحات مثل التى فى مدونتنا ، باذن الله فى هذه التدوينه سأشرح لكم 

كيفية عملها و سأشرح لكم كيف تعمل و كيفية تغيير أي شىء فيها .

أولا : القائمة التى فى مدونتنا هى معموله يدويه حتى فى روابط الصفحات انت الذي تضع الروابط .

ثانيا : يجب علينا اختيار اضافة HTML/JavaScript لكى نستطيع ان نعدل عليها

ثانيا : هى معموله من أكواد css مخصوصه لذلك شكلها راقى و جميل و يجب عليك التركيز فى هذا الدرس .

نبدأ على بركة الله

اول شىء معنا هى أكواد ال HTML التى ستستعمل فى الأداه

والتى يمكنك من خلالها التعديل عليها كما تريد :

<ul>
<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه هنا</a></li>
<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li > <a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه هنا</a></li>
</ul>

 طبعا بعضكم يعرف فائده كل وسم ، و البعض لا يعرف فساشرح لكم معناها :

ul : هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة .

li : هي اختصار "list item"  و هو عنصر يقوم بوضع البنود في القائمة  .

a  :  ارتباط تشعبي، والذي يستخدم لربط من صفحة واحدة إلى أخرى .

href : خاص باستدعاء الروابط .

img : أي صورة .

بعد ذلك ، يجب علينا ان نضيف بعض خصائص الـcss التى نستطيع من خلالها ان نغير شكل

القائمه كما نريد .

#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}
#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar a{text-decoration:none;color:#2D2D2D;}
#vbar a:hover{text-decoration:none;color:#037DFF;}
#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:&#39;alweeam&#39;, &#39;Droid Arabic Kufi&#39;, Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}
#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar .widget {   border: 1px solid #ddd;  background-color: #fff;  margin-bottom: 10px;  box-shadow:inset 0 0 4px #eee; }
.menu a img {float:right;padding-left:10px;}

كما يمكنك ان تغير الابعاد للقائمه عن طريق اضافه هذه الاكواد فقط

#vbar {
width:400px;
height :200px;
}

 و تغيير ما بالاحمر بالعرض الذي تريده

و تغيير ما بالبرتقالى بالطول الذي تريده

 بعد ذلك نعدل على اكواد الـHTML لكى نربطها بالـCSS لكي تصبح :

<div id="vbar"><ul><li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> 
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> 
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> 
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> 
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li> 
</ul></div>

و فى النهايه نضيف الأكواد على بعضها لكى تكون جاهزه للاضافه الى الادوات لكى تصبح :

<style>#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar a{text-decoration:none;color:#2D2D2D;}#vbar a:hover{text-decoration:none;color:#037DFF;}#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:&#39;alweeam&#39;, &#39;Droid Arabic Kufi&#39;, Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar .widget {   border: 1px solid #ddd;  background-color: #fff;  margin-bottom: 10px;  box-shadow:inset 0 0 4px #eee; }.menu a img {float:right;padding-left:10px;}</style>
<div id="vbar"><ul><li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
<li class="menu"><a href="رابط الصفحه هنا"><img src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه هنا</a></li>
</ul></div>

و تذكر ان تغير مابالأحمر الى رابط الصفحه .

و ان تغير ما بالأخضر الى صوره تعبر عن الصفحه .

و ان تغير ما بالبرتقالى الى عنوان الصفحه .

أرجو ان تكونوا استفدتوا بالدرس و لاتترددوا فى السؤال و كما اخبرتكم ، ان تعليقاتكم هى التى تشجعنى على هذا العمل .

و السلام عليكم ورحمة الله وبركاته

منشورة في: تصميم إضافات بلوجر