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

تنزيل المقال
شارك في التأليف: فريق عمل ويكي هاو

المصادر

تنزيل المقال

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

جزء 1
جزء 1 من 2:

كتابة كود HTML

تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ستقوم بالعادة باختيار <nav> لشريط الملاحة عبر الموقع، أو <header> لأقسام الروابط المخصصة للصفحات الأصغر حجمًا، أو <div> إن لم يبدُ أي خيار آخر مناسبًا. [١] [٢] ضع هذا بداخل عنصر <div> بحيث تتمكن من تعديل شكل الحاوية بجانب القائمة نفسها.
    2. 2
      < 
 
 div 
 > 
 < 
 nav 
 > 
 </ 
 nav 
 > 
 </ 
 div 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ستستخدم صفة الفئة لاحقًا لتغيير أسلوب هذه العناصر باستخدام CSS. قدم صفة فئة منفصلة للحاوية وللقائمة.
    3. 4
      < 
 
 div 
 class 
 = 
 "nav-wrapper" 
 > 
 < 
 nav 
 class 
 = 
 "nav-menu" 
 > 
 </ 
 nav 
 > 
 </ 
 div 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    تحتوي القائمة غير المرتبة (<ul>) على عناصر القائمة العليا (عناصر القائمة <li>) وهو ما سيتحرك المستخدم عليه بالفأرة لرؤية القوائم المنسدلة. أضف فئة "clearfix" إلى عنصر قائمتك، فسنعود إلى هنا لاحقًا في جدول بيانات CSS. [٣]
    4. 6
      < 
 
 divclass 
 =" 
 nav-wrapper 
 " 
 > 
 < 
 navclass 
 =" 
 nav-menu 
 " 
 > 
 < 
 ulclass 
 =" 
 clearfix 
 " 
 > 
 < 
 li 
 > 
Home </ 
 li 
 > 
 < 
 li 
 > 
Contributors </ 
 li 
 > 
 < 
 li 
 > 
ContactUs </ 
 li 
 > 
 </ 
 ul 
 > 
 </ 
 nav 
 > 
 </ 
 div 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    إن كانت عناصر القائمة ذات المستوى الأعلى تربط بصفحاتها الخاصة كذلك فأدخل الروابط الآن. حتى إن لم تكن تربط بأي مكان أو تربط بمرتكز غير موجود (مثل "#!") بحيث يتغير مظهر مؤشر الفأرة للمستخدم. في هذا المثال فإن "اتصل بنا" لا تربط بأي مكان، ولكن عنصري القائمة الأخريين يفعلان:
    5. 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    بعد انتهاء تعديل الأسلوب ستصير هذه القوائم هي القائمة المنسدلة بذاتها. أدخل القائمة بداخل عنصر القائمة الذي سيتحرك المستخدم فوقه بمؤشر الفأرة. ضمن صفة فئة ورابط كما سبق.
    6. 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    اربط صفحة أسلوب CSS في قسم رأس مستند HTML إن لم يسبق لك فعل ذلك. لا يغطي هذا المقال أساسيات CSS، مثل: ضبط الخط ولون الخلفية.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    أتذكر فئة "clearfix" التي أضفتها إلى القائمة؟ عادة ما يكون لعناصر لقائمة المنسدلة خلفية شفافة، وقد تؤدي لتحريك العناصر الأخرى من حولها. يمكنك إصلاح هذه المشكلة بتعديل سريع في CSS. إليك حلًا قصيرًا وبسيطًا رغم أنه لن يدعم متصفح إنترنت إكسبلورر 7 وما يسبقه: [٤]
    3. 3
      . 
 
 clearfix 
 : 
 after 
 { 
 content 
 : 
 "" 
 ; 
 display 
 : 
 table 
 ; 
 }
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    سيقوم هذا الكود بترتيب القائمة في أعلى الصفحة ويخفي عناصر القائمة المنسدلة. ستجد أنه مجرد كود بسيط للتركيز على ما هو مهم. يمكنك الإضافة إليه لاحقًا بخصائص CSS إضافية مثل الهوامش والحواف.
    4. 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    لم يتم ضبط عرض عناصر القائمة المنسدلة بعد. إليك كيفية جعل القوائم الفرعية بأكملها تظهر عندما تتحرك بمؤشر الفأرة على قوائمها الرئيسية:
    5. 7
      . 
 
 nav-menu 
 ul 
 li 
 : 
 hover 
 > 
 ul 
 { 
 display 
 : 
 inline-block 
 ; 
 }
  • لاحظ الآتي: إن كانت عناصر قائمتك المنسدلة تؤدي إلى قوائم أخرى إضافية فإن كل الخواص التي تضيفها هنا ستؤثر بها جميعًا. إن كنت تود تعديل أسلوب المستوى الأول من القوائم المنسدلة فقط فاستخدم ".nav-menu > ul" بدلًا من ذلك. [٥]
  • أشر إلى القائمة المنسدلة بسهم. عادة ما يظهر مصممو الويب أن العنصر يفتح قائمة منسدلة باستخدام سهم يشير للأسفل. سيضيف هذا الكود ذلك السهم إلى كل عنصر في قائمتك: [٦]
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
    •  . 
 nav-menu 
 > 
 ul 
 > 
 li 
 : 
 after 
 { 
 content 
 : 
 "\25BC" 
 ; 
 /*escapedunicodeforthedownarrow*/ 
 font-size 
 : 
 .5 
 em 
 ; 
 display 
 : 
 inline 
 ; 
 position 
 : 
 relative 
 ; 
 }
    • لاحظ: قم بالتعديلات على موقع السهم باستخدام خصائص الأعلى أو الأسفل أو اليمين أو اليسار.
    • لاحظ: إن لم تكن كل عناصر القائمة تحتوي على قوائم منسدلة فلا تقم بتعديل أسلوب كامل فئة قائمة الملاحة، بل أضف فئة أخرى (مثل قائمة منسدلة) لكل عنصر li في HTML حيث تريد وضع سهم. أشر إلى الفئة بدلًا من ذلك في الكود أعلاه.
  • اضبط الهوامش والخلفية والخصائص الأخرى. ستكون القائمة الآن قابلة للاستخدام ولكنها تحتاج لتعديلات جمالية. إن لم تكن خبيرًا بخصائص CSS الأساسية فتعلم المزيد هنا. استخدم هذه الخصائص لتغيير مظهر ومكان كل فئة للعنصر.
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

    • أفكار مفيدة

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

    مقالات ذات صلة في ويكي هاو

    كيفية
    البحث والعثور على شخص بطريقة سهلة عن طريق الصورة
    كيفية
    الحصول على كلمة مرور فيسبوك الخاصة بأحدهم
    كيفية
    معرفة من شارك منشوراتك على الفيسبوك
    كيفية
    اختيار عنوان ممتاز للبريد الإلكتروني
    كيفية
    الحصول على صديقة في لعبة جي تي آي 5
    كيفية
    معرفة من قام بحظرك على الفيسبوك
    كيفية
    معرفة عنوان أي شخص
    كيفية
    اختراق موقع إلكتروني باستخدام رموز اتش تي ام ال بسيطة
    كيفية
    اختيار اسم مميز ليوتيوب
    كيفية
    تطوير نفسك لتصبح هاكر
    كيفية
    استرداد حساب ياهو
    كيفية
    معرفة عنوان البريد الإلكتروني الخاص بشخص ما

    المصادر

    1. ↑ http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
    2. ↑ http://html5doctor.com/you-can-still-use-div/
    3. ↑ http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
    4. ↑ http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
    5. ↑ https://css-tricks.com/child-and-sibling-selectors/
    6. ↑ http://blog.teamtreehouse.com/create-simple-css-dropdown-menu

    المزيد حول هذا المقال

    بلغات أخرى
    تم عرض هذه الصفحة ٢٠٬٨٤٨ مرة.

    هل ساعدك هذا المقال؟