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

في هذا المقال سنوضح ببساطة كيفية عمل قائمة رئيسية و قائمة منسدلة منها .

أولاً : جزء HTML

القائمة تستخدم عنصري < ul > و< li > و هما عنصري تكوين القوائم في HTML و يتم تكوين القائمة الرئيسية بالشكل التالي :

1
2
3
4
5
6

<ul id="menu">
		<li><a href="#">رابط رئيسي 1</a></li>
		<li><a href="#">رابط رئيسي 2</a></li>
		<li><a href="#">رابط رئيسي 3</a></li>
		<li><a href="#">رابط رئيسي 4</a></li>
</ul>

و ستظهر أمامك بالشكل التالي في الصفحة :

• رابط رئيسي 1
• رابط رئيسي 2
• رابط رئيسي 3
• رابط رئيسي 4

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

الخطوة الثانية و هي إضافة القائمة الفرعية داخل القائمة الرئيسية , و يتم ذلك بإضافة قائمة داخل إحدى عناصر < li > التي أضفناها في الخطوة السابقة لتكون بالشكل التالي :

1
2
3
4
5
6
7
8
9
10
11
12
13

	<ul id="menu">
 
		<li><a href="#">رابط رئيسي 1</a></li>
		<li><a href="#">رابط رئيسي 2</a>
			<ul>
			<li><a href="#">رابط فرعي 1</a></li>
			<li><a href="#">رابط فرعي 2</a></li>
			<li><a href="#">رابط فرعي 3</a></li>
			</ul>
		</li>
		<li><a href="#">رابط رئيسي 3</a></li>
		<li><a href="#">رابط رئيسي 4</a></li>
	</ul>

و يظهر الكود السابق في الصفحة بالشكل التالي :

• رابط رئيسي 1
• رابط رئيسي 2
  • رابط فرعي 1
  • رابط فرعي 2
  • رابط فرعي 3
• رابط رئيسي 3
• رابط رئيسي 4

و بالتالي ينتهي الجزء الخاص بتكوين القائمة في HTML و ننتقل إلى الجزء الثاني و هو تكوين التنسيق باستخدام CSS :

ثانياً : تنسيق CSS

في هذا الجزء يتم تنسيق شكل القائمة لتظهر بشكل أفقي و كذلك ليظهر منها القائمة المنسدلة .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
Main Menu
*/
#menu, #menu ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#menu li {
	margin: 0;
	padding: 0;
	float: right;
	position: relative;
}
 
#menu li a, #menu li a:visited {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	padding: 5px 12px;
	color: #fff;
	background: #555;
	display: block;
	text-decoration: none;
}
 
#menu li a:hover {
	color: #fff;
	background: #222;
	padding: 5px 12px;
	display: block;
}

في هذا الجزء من التنسيق تتم عملية تنسيق القائمة الرئيسية, فيتم من خلاله تحديد مكان عرض القائمة و جعلها تظهر بشكل أفقي بحيث تظهر العناصر بجانب بعضها البعض بالإضافة إلى اتخاذ المسافات الفاصلة المتساوية بين كل عنصر من عناصر القائمة باستخدام خصائص padding و margin .

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/*
Sub Menu
*/
#menu li ul {
	width: 199px;
	padding:0;
	position: absolute;
	right: 0;
	display: none;
}
 
#menu li:hover ul {
	display: block;
}
 
#menu li li {
	margin: 0;
	padding: 0;
	float: right;
	width: 175px;
}
 
#menu li li a, #menu li li a:visited {
	margin: 0;
	padding: 5px 12px;
	border-top: 1px solid #fff;
	background: #666;
	width: 175px;
}
 
#menu li li a:hover{
	background: #222;
	color: #eee;
}

أما الجزء السابق فيقوم بعملية تنسيق القائمة الفرعية المنسدلة بنفس فكرة تنسيق القائمة الرئيسية مع الاختلاف في عملية ظهور و إخفاء القائمة عند مرور مؤشر الماوس عليها باستخدام خاصية display .