السلام عليكم ورحمة الله وبركاته
بعد طلب من أحد الأعضاء عن كيفية عمل قائمة الصفحات مثل التي في
مدونتنا، بإذن الله في هذه التدوين سأشرح لكم
كيفية عملها وسأشرح لكم كيف تعمل وكيفية تغيير أي شيء فيها.
أولا: القائمة التي في مدونتنا هي معموله يدوية حتى في روابط
الصفحات أنت الذي تضع الروابط.
ثانيا: يجب علينا اختيار إضافة 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:'alweeam', 'Droid Arabic Kufi', 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;
}
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:'alweeam', 'Droid Arabic Kufi', 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>
وتذكر أن تغير ما بالأحمر إلى رابط الصفحة.
وأن تغير ما بالأخضر إلى صوره تعبر عن الصفحة.
وأن تغير ما بالبرتقالي إلى عنوان الصفحة.
أرجو أن تكونوا استفدتوا بالدرس ولا تترددوا
في السؤال وكما أخبرتكم، أن تعليقاتكم هي التي تشجعني على هذا العمل.
والسلام عليكم ورحمة الله وبركاته
إضافة رائعة ، شكرا لك أبدعت أخي الكريم
ردحذفلكن هل تدري أن هذه الأكواد التي قمت بطرها مضغوطة ولا يمكن التعديل عليها
ردحذفهل من طريقة
هل يمكنك وضع أكواد css غير مضغوطة
ردحذفسابعتها لك على الخاص لانها ستكون طويله جدا ;(
ردحذفشكرا لك أنت شخص رائع
ردحذفالله يخليك الفضل لله و انا دايما موجود لمساعدتكم :>)
ردحذفشكرا لك اخي الكريم طلعت وفقك الله على المجهود
ردحذفالله يخليك الفضل لله و انا دايما موجود لمساعدتكم :>)
ردحذف