كيفية عمل قائمة منسدلة بإستخدام html & css

 ‌  عندما تقوم بتصميم موقع علي شبكه الإنترنت لعملك ، فأنت تريد أن يكون موقعك سهل الإستخدام ويضمن تنقل سهل بين أقسام الموقع . قد تبدو القوائم المنسدلة الخيار الأفضل.

القوائم المنسدلة عنصر سهل التصميم سهل الاستخدام

يتم الكشف عن القوائم والقوائم الفرعية عندما يقوم المستخدم بتحريك مؤشر الماوس فوق عنصر القائمة ، واعتاد المستخدمون علي هذا النظام في مواقع الويب المختلفة ، مما يجعل من السهل الانتقال داخل الموقع  من خلال تداخل الروابط .

في هذا المقال سنتعلم كيفية عمل قائمة منسدلة بطريقة سهلة وبسيطة عن طريق html & css بدون الحاجة إلي إستخدام لغة الجافا سكريبت.

طريقة العمل


أولا نقوم بإنشاء ملف html الذي يحتوي علي الوسوم الخاصة بالقائمة داخل الـ <body> نقوم بإنشاء قائمة رئيسية تحتوي علي أربع روابط داخل وسم<ul> .
<body>

<ul>
<li><a> home </a></li>
<li><a> web desing </a></li>
<li><a> about  </a> </li>
<li><a> contact </a></li>
</ul>

</body>

بعد ذلك نقوم بانشاء القوائم الفرعية اسفل الرابط web desing وستكون هذة القوائم عبارة عن قائمة<ul> داخل وسم <li> كما هو موضح فى الكود التالى :

<body>

<ul>

<li><a> Home </a></li>
<li><a> Web Desing </a>
<ul>
<li><a> html </a></li>
<li><a> css </a></li>
<li><a> java scribt </a></li>
<li><a> jqury </a></li>
</ul>
</li>
<li><a> About  </a> </li>
<li><a> Contact </a></li>

</ul>

</body>

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


عمل تنسيقات css


ننتقل الان الي عمل تنسيقات css عليها من خلال انشاء ملف style.css ونقوم بكتابة الاكواد التالية فى ملف (style.css)

في هذة الشفرة البرمجة قمنا بحديد القائمةالرئيسية  <ul> وإخفاء  نقاط القوائم منها وإعطاءها اللون الأبيض  ثم حددنا القوائم الأساسية   و تحريكها إلي اليسار وتحديد عرضها وإرتفاعها وتخصيص درجة شفافية  وتحديد لون الخلفية كما هو موضح بالكود التالى:
} body
font-family: arial
{
  } ul 
;margin: 0px
;padding: 0px
;list-style: none
;color :#fff
{
} ul li  
;float: left 
;width: 240px 
;height: 40px 
;background: #000 
;opacity: .8
;line-height: 40px 
;text-align: center 
;font-size: 20px 
border: 1px solid #000 
{

بعد ذلك حددنا الروابط  وقمنا بإخفاء الخط السفلي منها وجعلها في الوضع المطلق  وعند تحريك الماوس علي الرابط ستتغير الخلفية الي اللون الاخضر

كما هو موضح فى الكود التالى
} ul li a 
;text-decoration: none 
;color:#fff 
display: block 
{
} ul li a:hover 
;background: green 
{
} ul li ul li 
;display: none 
{
} ul li:hover ul li
display: block 
{

الأن أصبح لدينا قائمة منسدلة رائعة كما هو موضح