كيف يمكن إنشاء القوائم العائمة الأفقية باستخدام لغة برمجة سي أس أس CSS؟

يمكن إنشاء القوائم العائمة الأفقية باستخدام خاصية display و position في لغة برمجة سي أس أس CSS. وفيما يلي خطوات بسيطة لإنشاء قائمة عائمة أفقية:

1- تحديد قائمة HTML الأساسية:

“`

• Home
• About
• Services
• Contact

“`

2- تعريف الخصائص اللازمة باستخدام CSS:

“`
.main-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.main-menu li {
position: relative;
margin: 0 20px;
}

.main-menu li a {
display: block;
padding: 10px;
font-size: 16px;
text-decoration: none;
color: #333;
}

.main-menu li:hover .sub-menu {
display: block;
}

.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
background-color: #fff;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.sub-menu li {
position: static;
margin: 0;
}

.sub-menu li a {
display: block;
padding: 10px;
font-size: 14px;
text-decoration: none;
color: #333;
}

.sub-menu li:hover {
background-color: #f2f2f2;
}

.sub-menu li:hover a {
color: #007aff;
}
“`

3- تعريف القائمة الفرعية:

“`

• Service 1
• Service 2
• Service 3

“`

4- تدرج القائمة الفرعية كقائمة فرعية من العناصر الرئيسية:

“`

• Home

  • Sub-Menu 1
  • Sub-Menu 2
  • Sub-Menu 3

• About
• Services

  • Service 1
  • Service 2
  • Service 3

• Contact

“`

تتضمن هذه الخصائص عرض على شكل Flexbox ، و other display properties ، واستخدام position ، لتحديد موقع القوائم الفرعية ، واستخدام z-index ، لضمان ظهور القائمة الفرعية فوق المحتوى الأساسي عند النقر عليها. تستخدم الخصائص الأخرى مثل background-color و box-shadow لتحسين التصميم العام للقائمة العائمة الافقية.