كيفية عمل قائمة منسدلة بإستخدام 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>
</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 
{

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


التعليقات

BLOGGER: 1

الاسم

اكشن فوتوشوب,53,البرمجة,3,بريست لايت روم,10,تعلم التصوير,2,خطأ bx فى بلوجر,1,خطوط احترافية,16,خطوط انجليزية,57,خطوط عربية,58,ستايل,3,ستايلات فوتوشوب,23,شعارات,10,فرش,1,فرش فوتوشوب,12,فلاتر فوتوشوب,36,فلاتر لايت روم,31,فوتوشوب,8,لايت روم,21,مقالات متنوعة,1,موك اب,15,
rtl
item
برو اكاديمي: كيفية عمل قائمة منسدلة بإستخدام html & css
كيفية عمل قائمة منسدلة بإستخدام html & css
https://3.bp.blogspot.com/-Yh8wfHmUgnI/W9LQQqbrt1I/AAAAAAAAA1I/wpmMWc3XMOsb4JGIJa2OeYvJLp_-saSaQCLcBGAs/s640/54600.png
https://3.bp.blogspot.com/-Yh8wfHmUgnI/W9LQQqbrt1I/AAAAAAAAA1I/wpmMWc3XMOsb4JGIJa2OeYvJLp_-saSaQCLcBGAs/s72-c/54600.png
برو اكاديمي
https://www.pro-academe.com/2018/10/html-css.html
https://www.pro-academe.com/
https://www.pro-academe.com/
https://www.pro-academe.com/2018/10/html-css.html
true
391749931856565121
UTF-8
Loaded All Posts لا يوجد أى مقالات مشاهدة المزيد اقرأ المزيد Reply Cancel reply Delete By الرئيسية الصفحات المقالات مشاهدة المزيد RECOMMENDED FOR YOU القسم الأرشيف بـحـث كل المقالات Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content