تصميم قائمة منسدلة بإستخدام CSS

*****

    القائمة الأفقية أو الناف بار هي أحد الأجزاء الرئيسية في الموقع أو المدونة كما أن لها دور هام جدا فيه وذلك لأنه عن طريقها ينتقل الزائر بين صفحاته وأقسامه بكل سهولة ودون أدنى معاناه ، و قد تحتاج لعمل قائمة أو قوائم منسدلة تضع فيها أقسام فرعية في قسم أو أكثر من الأقسام الرئيسية للقائمة الأفقية لموقعك أو مدونتك . لذلك فإننا سنقوم بشرح كيفية إنشاء قائمة عادية بها قائمة منسدلة بأقل كمية ممكنة من الأكواد وبإستخدام لغتي CSS و HTML كما بالشكل التالي :  

 إضغط على الصورة لتكبيرها

خطوات تصميم قائمة منسدلة

ويتطلب تصميم قائمة منسدلة مع كل من القائمة العادية والمحدبة نوعين من الأكواد كما تم ذكره سابقا ويمر بالخطوات الاّتية :

1-كتابة أكواد HTML الخاصة بالقائمة الأفقية (الرئيسية) كلاّتي :

<div id=menue>

<ul>

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

<li><a href="#">تصميم</a></li>

<li><a href=”#”برمجة</a></li>

<li><a href="#">سيو</a></li>

</ul>

</div> 

2- إضافة أكواد القائمة المنسدلة وهي عبارة عن وسم <ul>  موجود داخل وسم <li> للقسم المطلوب عمل قائمة منسدلة له ، وهي الأكواد ذات اللون الأحمر ، بالإضافة لكود الصورة ذو اللون الأخضر وهو عبارة عن صورة سهم للإشارة إلى أن رابط القسم الموجود بجواره يحتوي على قائمة منسدلة ، إلى أكواد القائمة الرئيسية بين وسمي البداية <li> والنهاية </li> للقسم أو الرابط الخاص به كالاّتي :

<div id=menue>

<ul>

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

<li><a href="#">تصميم</a></li>

<li><a href=”#”>

<img src="http://www10.0zz0.com/2016/05/08/20/117419207.png"/>برمجة</a>

<ul>

<li><a href="#">html</a></li>

<li><a href="#">css</a></li>

<li><a href="#">php</a></li>

</ul>

</li>

<li><a href="#">سيو</a></li>

</ul>

</div>

وعند فتح الكود السابق في المتصفح نحصل على النتيجة التالية :

 

3- تنسيق القائمة الأفقية وذلك كالاّتي :

* تحـديد شكـل القائمـة مثل العـرض والإرتفـاع واللـون ... إلـخ وذلــــــك بإضافــــــة الأكــــــواد التاليــــــة بيــن وســــمي البدايــــــة
<style type="text/css”> والنهاية </style> في الجزء الخاص بتنسيق القائمة ، وتم إستخدام الخاصية  position:relative وذلك للتحكم في مكان القائمة المنسدلة بالنسبة للقائمة الأفقية أي حتى نستطيع إعطاء الخاصية position: absloute للقائمة المنسدلة كما سيأتي لاحقا .

ولجعل القائمة تأخذ الشكل المحدب نضيف الأكواد التالية إلى المحدد menue .

background: -moz-linear-gradient(top, #0272a7, #013953);

background: -webkit-gradient(linear, 0% 0%,0% 100%,

from(#0272a7), to(#013953));

وبذلك تكون كل أكواد المحدد menue كالاّتي : 

#menue{
width:550px;
height:45px;
margin:10px auto 0px auto;
padding:0px 5px 0px 5px;
background: #014464;
border-radius: 10px;
position: relative;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#0272a7), to(#013953));
}

*إضافة الأكواد الخاصة بتحديد شكل الأقسام أو التسميات كالاّتي : 

#menue ul li {
float: right;
list-style: none;
text-align: center;
position: relative;
padding: 4px 10px 4px 10px;
margin-right: 10px;
margin-top: 7px;
border: none;
background: #F4F4F4;
border-radius: 5px 5px 0px 0px;
}

* إضافة الأكواد الخاصة بالخط مثل نوع وحجم ولون الخط  كالاّتي :

#menue ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #014464;
weight: bold;
display:block;
text-decoration:none;
} 

* لإخفاء القائمة المنسدلة نضيف الكود التالي : 

#menue ul ul {
display: none;
}

* لإظهار القائمة المنسدلة عند وضع مؤشر الماوس على القسم أوالتسمية المحتوية عليها نضيف الكود التالي:

#menue ul li:hover ul { display: block; }

* إضافة الأكواد الخاصة بالشكل واللون ...إلخ للقائمة المنسدلة وهي مشابهة لأكواد القائمة الأفقية ، ولكي نضمن أن تظهر القائمة المنسدلة أسفل القائمة الرئيسية فقد استعملنا الخاصية position: absolute ومعها الخاصيتين المرتبطتين بها وهما top: 100% ، left: 0% كالاّتي :

#menue ul ul{
background: #086A87;
border-radius: 0px;
padding: 7px;
position: absolute;
top: 100%;
left: 0%;
}
#menue ul ul li {
float: none;
margin: 5px 2px 5px 2px;
padding: 0px;
}
#menue ul ul li a {
padding: 3px;
color: #014464;
}
#menue ul ul li a:hover {
background: #014464;
color: white;
}

5- عند تجميع كل الأكواد السابقة سواء أكواد HTML أو أكواد CSS الخاصة بكل من القائمة الأفقية والمنسدلة نحصل على الاّتي:

<style type="text/css"> #menue{ width:950px; margin:10px auto 0px auto; height:45px; padding:0px 5px 0px 5px; background: #014464; border-radius: 10px; } #menue ul li { float: right; list-style: none; text-align: center; position: relative; padding: 4px 10px 4px 10px; margin-right: 10px; margin-top: 7px; border: none; background: #F4F4F4; border-radius: 5px 5px 0px 0px; } #menue ul li a { font-family:Arial, Helvetica, sans-serif; font-size:18px; color: #014464; weight: bold; display:block; text-decoration:none; } #menue ul li a:hover { color: white; background: #014464; } #menue ul img { height: 15px; width: 15px; position: absolute; right: 80%; top: 40% }   #menue ul ul { display: none; } #menue ul li:hover ul { display: block; } #menue ul ul{ background: #086A87; border-radius: 0px; padding: 7px; position: absolute; top: 100%; left: 0%; } #menue ul ul li { float: none; margin: 5px 2px 5px 2px; padding: 0px; } #menue ul ul li a { padding: 3px; color: #014464; } #menue ul ul li a:hover { background: #014464; color: white; }   </style>   <div id=menue> <ul> <li><a href="#">الرئيسية</a></li> <li><a href="#">تصميم</a></li> <li><a href="#"> <img src="http://www10.0zz0.com/2016/05/ 08/20/117419207.png"/>برمجة</a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">php</a></li> </ul> </li> <li><a href="#">سيو</a></li> </ul> </div>

وتكون النتيجة النهائية كالتالي:

إضغط على الصورة لتكبيرها

نأسف للإطالة
ودمتم في رعاية الله