شرح طريقة عمل قائمة منسدلة

السلام عليك ورحمة الله وبركاته مرحبآ بكم زوار مدونة العالمي

سأشرح لكم كيفية عمل قائمة منسدلة للمدونة 

الطلبات :- اولآ يجب ان يكون لديك محرر نصوص ( Notepad) 
ثانيآ متصفح لعرض ما ستقوم بعملة

اللغات المستخدمة :- اولآ لغة الـ HTML
ثانيآ لغة الـ CSS


لنبدأ اولآ سنقوم بعمل القائمة بلغة الـ HTML

<ul id="menu">

<li><a href="#">قائمة رئيسية</a></li>

<li><a href="#">قائمة رئيسية</a></li>

<li><a href="#">قائمة رئيسية</a></li>

<li><a href="#">قائمة رئيسية</a></li>

</ul>

** لاحظ اننا اعطينا معرف خاص بالقائمة وهوا Menu ولقد اعطيناه Id **
فتصبح القائمة بهذا الشكل :-

ثم نقوم بإدخال القوائم المنسدله كالتالي ....

<ul id="menu">

<li><a href="#">قائمة رئيسية</a>

<ul>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

</ul>

</li>

<li><a href="#">قائمة رئيسية</a>

<ul>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

</ul>

</li>

<li><a href="#">قائمة رئيسية</a>

<ul>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

</ul>

</li>

<li><a href="#">قائمة رئيسية</a>

<ul>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

<li><a href="#">قائمة منسدلة</a></li>

</ul>

</li>

</ul>

** لاحظ انن وضعنا داخل كل بند من بنود القائمة القائمة الرئيسية قائمة فرعية تابعة له **
فتصبح القائمة بالشكل التالي :-

الان نأتي لنضيف اكواد الـ Css لتنسيق لقائمة
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف menu# والقائمة الفرعية الأخرى داخل البنود، يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.

#menu , menu li ul{ margin:0;
padding:0;
list-style-type:none;}

ولجعل القائمة أفقية سوف نقوم بالتعديل على بنود كل من القائمة الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر. 

#menu li{
float:right;
margin:0;
padding:0;
position:relative;}
#menu li li {
float:right;
width:200px;
margin:0;
padding:0;}

ثم نأتي الي التعديل علي الوصلات الرئيسية بالبنود كالتالي

#menu li a ,#menu li a:link ,#menu li a:visited{
font: blod 12px Tahoma;
 color: #414A52;
 text-decoration: none;
 background: #D2DDE4;
 display: block;
 padding: 5px 12px;}
 #menu li a:hover, #menu li a:active {
 color: #FFF;
 display: block;
 background: #2583AD;
 padding: 5px 14px;
}

ثم نأتي الوصلات الداخل للبنود الفرعية بالقائمة المنسدلة 

#menu li li a, #menu li li a:link, #menu li li a:visited { background: #D2DDE4; width: 175px; margin: 0; padding: 5px 12px; border-top: 1px solid #FFF;}
#menu li li a:hover, #menu li li a:active { background: #2583AD;}

ثم نأتي اخيرآ الي القائمة الفرعية مره اخري وضبط الجسم واخفائها في حاله عدم النقر علي بنود القائمة الرئيسية  وسوف تلاحظ وتلاحظ أنه تم تحدد الموضع absolute لليمين، نسبه الى البند الرئيسي المحدد موضعه relative.

نضع الاكواد هكذا

#menu li ul { position: absolute; width: 199px; display: none; right: 0;}#menu li:hover ul { display: block;}

في الاخير تصبح القائمة بالشكل التالي :-

وفي الاخير لا تنسي ان تترك تعليقك سواء سلبآ او ايجابآ