كيفية إنشاء قائمة منسدلة في HTML وCSS

تنزيل المقال

تنزيل المقال

تقدم القائمة المنسدلة طريقة عرض واضحة ومرتبة لكل الأقسام الرئيسية بالصفحة بجانب الأقسام الفرعية داخلها. كل ما تحتاجه لإظهار الأقسام الفرعية هو بالتحرك بمؤشر الفأرة على الأقسام الرئيسية. يمكنك صنع قائمة منسدلة باستخدام أكواد HTML وCSS فقط.

الخطوات

جزء 1

جزء 1 من 2:

كتابة كود HTML

تنزيل المقال

1. 
   1
   أنشئ قسم الملاحة (التحكم والانتقال). ستقوم بالعادة باختيار <nav> لشريط الملاحة عبر الموقع، أو <header> لأقسام الروابط المخصصة للصفحات الأصغر حجمًا، أو <div> إن لم يبدُ أي خيار آخر مناسبًا. ضع هذا بداخل عنصر <div> بحيث تتمكن من تعديل شكل الحاوية بجانب القائمة نفسها.
2
<div><nav></nav></div>
2. 
   3
   امنح كل قسم صفة فئة. ستستخدم صفة الفئة لاحقًا لتغيير أسلوب هذه العناصر باستخدام CSS. قدم صفة فئة منفصلة للحاوية وللقائمة.
4
<div class="nav-wrapper">   <nav class="nav-menu">   </nav></div>
3. 
   5
   أضف عناصر القائمة. تحتوي القائمة غير المرتبة (<ul>) على عناصر القائمة العليا (عناصر القائمة <li>) وهو ما سيتحرك المستخدم عليه بالفأرة لرؤية القوائم المنسدلة. أضف فئة "clearfix" إلى عنصر قائمتك، فسنعود إلى هنا لاحقًا في جدول بيانات CSS.
6
<divclass="nav-wrapper"><navclass="nav-menu"><ulclass="clearfix"><li>Home</li><li>Contributors</li><li>ContactUs</li></ul></nav></div>
4. 
   7
   أدخل الروابط. إن كانت عناصر القائمة ذات المستوى الأعلى تربط بصفحاتها الخاصة كذلك فأدخل الروابط الآن. حتى إن لم تكن تربط بأي مكان أو تربط بمرتكز غير موجود (مثل "#!") بحيث يتغير مظهر مؤشر الفأرة للمستخدم. في هذا المثال فإن "اتصل بنا" لا تربط بأي مكان، ولكن عنصري القائمة الأخريين يفعلان:
8
<divclass="nav-wrapper"><navclass="nav-menu"><ulclass="clearfix"><li><ahref="/">Home</a></li><li><ahref="/Contributors">Contributors</a></li><li><ahref="#!">ContactUs</a></li></ul></nav></div>
5. 
   9
   انشئ قوائم فرعية للعناصر المنسدلة. بعد انتهاء تعديل الأسلوب ستصير هذه القوائم هي القائمة المنسدلة بذاتها. أدخل القائمة بداخل عنصر القائمة الذي سيتحرك المستخدم فوقه بمؤشر الفأرة. ضمن صفة فئة ورابط كما سبق.
10
<divclass="nav-wrapper"><navclass="nav-menu"><ulclass="clearfix"><li><ahref="/">Home</a></li><li><ahref="/Contributors">Contributors</a><ulclass="sub-menu"><li><ahref="/jordan">MichaelJordan</a></li><li><ahref="/hawking">StephenHawking</a></li></ul></li><li><ahref="#!">ContactUs</a><ulclass="sub-menu"><li><ahref="mailto:bugsupport@company.com">ReportaBug</a></li><li><ahref="/support">CustomerSupport</a></li></ul></li></ul></nav></div>

جزء 2

جزء 2 من 2:

كتابة كود CSS

تنزيل المقال

1. 
   1
   افتح صفحة أسلوب أو نمط CSS. اربط صفحة أسلوب CSS في قسم رأس مستند HTML إن لم يسبق لك فعل ذلك. لا يغطي هذا المقال أساسيات CSS، مثل: ضبط الخط ولون الخلفية.
2. 
   2
   أضف كود clearfix. أتذكر فئة "clearfix" التي أضفتها إلى القائمة؟ عادة ما يكون لعناصر لقائمة المنسدلة خلفية شفافة، وقد تؤدي لتحريك العناصر الأخرى من حولها. يمكنك إصلاح هذه المشكلة بتعديل سريع في CSS. إليك حلًا قصيرًا وبسيطًا رغم أنه لن يدعم متصفح إنترنت إكسبلورر 7 وما يسبقه:
3
.clearfix:after {content: "";display: table;}
3. 
   4
   أنشئ الهيكل الأساسي. سيقوم هذا الكود بترتيب القائمة في أعلى الصفحة ويخفي عناصر القائمة المنسدلة. ستجد أنه مجرد كود بسيط للتركيز على ما هو مهم. يمكنك الإضافة إليه لاحقًا بخصائص CSS إضافية مثل الهوامش والحواف.
5
.nav-wrapper{width:100%;background:#999;}.nav-menu{position:relative;display:inline-block;}.nav-menuli{display:inline;list-style-type:none;}.sub-menu{position:absolute;display:none;background:#ccc;}
4. 
   6
   اجعل عناصر القائمة المنسدلة تظهر عند تحريك مؤشر الفأرة. لم يتم ضبط عرض عناصر القائمة المنسدلة بعد. إليك كيفية جعل القوائم الفرعية بأكملها تظهر عندما تتحرك بمؤشر الفأرة على قوائمها الرئيسية:
7
.nav-menu ul li:hover > ul {   display:inline-block;}

• لاحظ الآتي: إن كانت عناصر قائمتك المنسدلة تؤدي إلى قوائم أخرى إضافية فإن كل الخواص التي تضيفها هنا ستؤثر بها جميعًا. إن كنت تود تعديل أسلوب المستوى الأول من القوائم المنسدلة فقط فاستخدم ".nav-menu > ul" بدلًا من ذلك.

أشر إلى القائمة المنسدلة بسهم. عادة ما يظهر مصممو الويب أن العنصر يفتح قائمة منسدلة باستخدام سهم يشير للأسفل. سيضيف هذا الكود ذلك السهم إلى كل عنصر في قائمتك:

.nav-menu>ul>li:after{content:"\25BC";/*escapedunicodeforthedownarrow*/font-size:.5em;display:inline;position:relative;   }

• لاحظ: قم بالتعديلات على موقع السهم باستخدام خصائص الأعلى أو الأسفل أو اليمين أو اليسار.
• لاحظ: إن لم تكن كل عناصر القائمة تحتوي على قوائم منسدلة فلا تقم بتعديل أسلوب كامل فئة قائمة الملاحة، بل أضف فئة أخرى (مثل قائمة منسدلة) لكل عنصر li في HTML حيث تريد وضع سهم. أشر إلى الفئة بدلًا من ذلك في الكود أعلاه.

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

أفكار مفيدة

• إن أردت إضافة قائمة منسدلة إلى نموذج فإن HTML 5 تسهل هذا الأمر باستخدام عنصر <select>.
• سيؤدي رابط <a href="#"> للتمرير إلى أعلى الصفحة، بينما الرابط الذي يشير إلى مرتكز غير موجود مثل <a href="#!"> لن يمرر. إن شعرت بأن هذه الطريقة غير مرتبة بالنسبة لك فيمكنك تغيير مظهر المؤشر باستخدام CSS بدلًا من ذلك.
• إن كنت تقوم بنسخ ولصق الكود المذكور فامسح كل نقاط القائمة.