اساسيات تصميم القوائم نافبار

نـبدأ باسم اللــهـ ..

أولا ..

يوجـد هناك نوعين من القوائم في أكواد الـ html

القوائم المرتبة (المرقمة)ويرمز لهـا بـ <ol> اختصاراً لـ Ordered List
القوائم الغير مرتبة(المنقطة) ويرمز لها بـ <ul> اختصاراً لـ Unordered List

دائما ما نستخدم في تصميم القوائم الـ <ul> القائمة الغير مرتبة .. وقليل جدااً من يستخدم الـ <ol>
..
العناصر الموجودة داخل القائمة يرمز لها بـ <li> اختصارا لـ List item

وهي التي يكتب بينها الرابط واسمـهـ ..


مثـال:

PHP كود :

<!-- قائمة غير مرتبـة Unordered List-->
<ul>
<li><a href="#">الرابط الأول</a></li>
<li><a href="#">الرابط الثاني</a></li>
<li><a href="#">الرابط الثالث</a></li>
<li><a href="#">الرابط الرابع</a></li>
</ul>

<!-- قائمة مرتبـة Ordered List-->
<ol>
<li><a href="#">الرابط الأول</a></li>
<li><a href="#">الرابط الثاني</a></li>
<li><a href="#">الرابط الثالث</a></li>
<li><a href="#">الرابط الرابع</a></li>
</ol>





كيف تضيف قائمة فرعية؟

تستطيع اضافتها عن طريق اضافة وسم القائمة <ul> داخل احدى العناصر
الأساسية .. كأنك بتنشأ قائمة من جديد ولكن سنضعها أسفل العنصر المراد وضع
عناصر فرعية لـهـ ..

كالتـالي:


PHP كود :

<ul>
<li><a href="#">الأخبار</a>
<!-- قائمة فرعية -->
<ul>
<li><a href="#">رابط فرعي 1</a></li>
<li><a href="#">رابط فرعي 2</a></li>
<li><a href="#">رابط فرعي 3</a></li>
<li><a href="#">رابط فرعي 4</a></li>
</ul>
<!-- قائمة فرعية -->
</li>
<li><a href="#">الأقسام</a></li>
<li><a href="#">روابط</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>






وسيكون شكل القائمة كالتـالي قبل تكويدها بالـ CSS ..



~//-----------------------------------

ثانيـا..

التحـكم في الحـاشية والحشو (margin & padding) الخاصة بالقائمة وعناصرها ..

الحاشية margin مثل ماهي معروفةهي التي تتحكم في بعد العناصر عن بعضها البعض .. بمعني انها خارجية وليست داخلية ..

الحشـو padding تتحكم في أبعاد العنصر ولكن من الداخل .. وليس كالخارج مثل الـ margin ..

تطبيق هذا الكلام على القائمة .. سيكون كالتالي ..



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

~//----------------------------------------

تكويد وتنسيق القائمة بالـ css

سنقوم بتنسيق نافبار علوي بسيط ..
ستتعرف من هنا كيف يمكنك التحكم في شكل القائمة ككل والتحكم في عناصرها ..

من



الى



تابعوا معـي ..
~.......................

نبدأ أولا بإعطاء الوسم ul كلاس أو ID يشمل على كل الخصائص التي نريدها للنافبار ..

سنستخدم الـ ID

[php

<ul id="navbar-m">
<li><a href="#">الأخبار</a>
<!-- قائمة فرعية -->
<ul id="navbar-c">
<li><a href="#">رابط فرعي 1</a></li>
<li><a href="#">رابط فرعي 2</a></li>
<li><a href="#">رابط فرعي 3</a></li>
<li><a href="#">رابط فرعي 4</a></li>
</ul>
<!-- قائمة فرعية -->
</li>
<li><a href="#">الأقسام</a></li>
<li><a href="#">روابط</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>

[/php]


القائمة الأساسية أعطيناها ID يسمى navbar-m
والفرعية navbar-c

المطلوب منك في هذا الأي دي ..

تحديد مكان النافبار واحداثياتهـ وازالة التنقيط
جعلها بشكل أفقي
اعطاء كل عنصر مسافة عن الآخر
تحديد وتنسيق شكل الرابط في الحالة العادية
وفي حالة مرور الماوس ..

أكواد css

كود :

#navbar-m ul {
margin: 0;
padding: 0;

}
/*خصائص عناصر القائمة*/
#navbar-m li{
float:right; /* لتحديد اتجاه القائمة */
display:inline; /* لعرضها بشكل أفقي */
}

/*خصائص الرابط*/
#navbar-m a{
padding: 8px 20px; /*تحديد حشو كل عنصر (رابط)*/
color:#66CCFF;
background:#3366CC;
font:bold 16px Arial, Helvetica, sans-serif;
text-decoration:none;
}
/*حالة ظهور الرابط عند مرور الماوس*/
#navbar-m a:hover{
background:#66CCFF;
color:#fff;
border-bottom:1px solid #CC0066;
}



// حددنا مكان القائمة وهو أعلى المتصفح باستخدام margin و padding ..

// لجعل القائمة أفقية بعد ان كانت عامودية مع استخدام الـ float
,, position: relative أو display: inline ..

display: inline الأفضل .. وتكفي لحالها لجعل القائمة أفقية ..وتزيل علامات التنقيط ..
استخدمنا أيضا خاصية التعويم float لمحاذاتها ناحية اليمين وبالتالي ستتناسب مع صفحاتنا العربية ..


// نسقنا شكل الروابط والخط واللون واعطيناها مسافات فاصلة بي كل رابط وآخر باستخدام padding

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

سنتوقف هنــا ..

الجزء القادم سيكون عن تنسيق اللأقسام الفرعية ..
الاخت نور

بارك الله فيك جوزيت خيرا