كيفية عمل قائمة منسدلة بإستخدام html & css عندما تقوم بتصميم موقع علي شبكه الإنترنت لعملك ، فأنت تريد أن يكون موقعك سهل الإست...
كيفية عمل قائمة منسدلة بإستخدام 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>
<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><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>
<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
;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
;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
;text-decoration: none
;color:#fff
display: block
{
} ul li a:hover
;background: green
} ul li a:hover
;background: green
{
} ul li ul li
;display: none
{
} ul li ul li
;display: none
{
} ul li:hover ul li
display: block
{
display: block
{
الأن أصبح لدينا قائمة منسدلة رائعة كما هو موضح
غلط الكودد
ردحذفاريد اعمل قائمة منسدلة الي تكون فيها خيارات بحيث اضغط سهم تطلع الخيارات
ردحذفكيف يكون ذلك؟
كيف ممكن عمل قائمة منسدله تحتوي عدة خيارات بحيث عند الضغط على السهم نظهر الخيارات
ردحذف