كيفية عمل قائمة منسدلة باستخدام مكتبة Ext Core هناك العديد من مكتبات تطوير بنية الصفحات باستخدام Javascript و من أشهرها مكتبة jQuery و التي يكثر استخدامها الآن في العديد من المواقع الكبرى و يمكن تطويعها لعمل العديد من التأثيرات الرائعة و أيضاً مكتبة Mootools و Prototype و غيرها . و لكننا اليوم على موعد مع مجموعة جديدة ظهرت حديثاً للنور و هي مكتبة Ext Core .

و تتمتع مكتبة Ext Core بسهولة الاستخدام و السرعة التي تظهر في أدائها , و سنسعترض في هذا المقال كيفية عمل قائمة منسدلة سواء عرضية أو طولية مع مساعدة CSS في تطوير الشكل .
هناك العديد من الأمثلة المتوفرة لعمل قائمة منسدلة باستخدام CSS فقط و التحكم فيها من خلال عدة عناصر مثل Position و z-index للتحكم في مكان الظهور و كيفية الاخفاء , و لكن أحياناً ما نحتاج لبعض التأثير الجمالي على القائمة التي نستخدمها . القائمة التي لدينا اليوم بسيطة و سهلة و التعديل فيها أيضاً بسيط سواء في كود HTML أو في CSS .


عرض حي Demoتنزيل

كيفية إدراج مكتبة Ext Core في الصفحة

هناك الطريقة التقليدية و هي تنزيل ملف Ext Core على موقعك و إضافته من خلال عنصر Script إلى وسم < head > , و لكن من الأفضل لسرعة أداء موقعك جلب مكتبات تطوير بنية الصفحات Ajax Libraries API من خلال Google فهي تساهم في سرعة الصفحة الخاصة بك و توفير مساحة من عملية تحميل الملف كل مرة من خلال موقعك :

1

<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>

يمكن جلب روابط المكتبات الأخرى مثل jQuery, Mootools من خلال الصفحة الخاصة بها على Google Code.

إضافة الملفات اللازمة لتشغيل القائمة

يجب إضافة مجموعة الملفات اللازمة لتشغيل القائمة سواء ملفات الجافاسكربت أو ملفات CSS و يتم إضافتها داخل وسم < head > :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link href="menu.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
            Ext.onReady(function() {
                new Ext.ux.Menu('simple-horizontal-menu', {
                    transitionType: 'slide',
                    direction: 'horizontal', // default
                    delay: 0.2,              // default
                    autoWidth: true,         // default
                    transitionDuration: 0.3, // default
                    animate: true,           // default
                    currentClass: 'current'  // default
                });
                new Ext.ux.Menu('simple-vertical-menu', {
                    direction: 'vertical'
                });
            });
        </script>

في الكود السابق تمت إضافة ملفات Javascript و CSS لتشغيل القائمة و إضافة الكود الخاص بإعدادات القائمتين العرضية أو الطولية .

إضافة القائمة في الصفحة

لاستخدام القائمة في الصفحة ما عليك إلا اختيار إذا كنت ستستخدم القائمة الطولية أو العرضية

القائمة العرضية

و يكون كود HTML للقائمة العرضية كالتالي :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul id="simple-horizontal-menu">
	<li><a href="#">عنصر قائمة رئيسية 1</a>
	<ul>
		<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>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 2</a></li>
	<li><a href="#">عنصر قائمة رئيسية 3</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 4</a></li>
		<li><a href="#">عنصر قائمة داخلية 5</a></li>
		<li><a href="#">عنصر قائمة داخلية 6</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>

في الكود السابق تم استدعاء إعدادات القائمة و تحويلها لقائمة عرضية بمساعدة ملفات التنسيق و الجافاسكربت من خلال معرف simple-horizontal-menu , ثم البدء في تكوين قائمة باستخدام عنصر < ul > و اشتقاق العناصر الداخلية منه باستخدام < li > , و كذلك تكوين قائمة منبثقة من العنصر الداخلي كما في الكود السابق :

1
2
3
4
5
6
7

		<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>

القائمة الطولية

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<ul id="simple-vertical-menu">
	<li><a href="#">تجربة</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 1</a></li>
		<li><a href="#">عنصر قائمة داخلية 2</a>
		<ul>
			<li><a href="#">sub عنصر قائمة داخلية 1</a></li>
			<li><a href="#">sub عنصر قائمة داخلية 2</a></li>
			<li><a href="#">sub عنصر قائمة داخلية 3</a></li>
		</ul>
		</li>
		<li><a href="#">عنصر قائمة داخلية 3</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 2</a></li>
	<li><a href="#">عنصر قائمة رئيسية 3</a>
	<ul>
		<li><a href="#">عنصر قائمة داخلية 4</a></li>
		<li><a href="#">عنصر قائمة داخلية 5</a></li>
		<li><a href="#">عنصر قائمة داخلية 6</a></li>
	</ul>
	</li>
	<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>

نفس الفكرة في القائمة الطولية من خلال استدعاء معرف simple-vertical-menu لجلب إعدادات القائمة الطولية و منها يتم استخدام عناصر < ul > و < li > لعمل القائمة .

ملف التنسيق CSS

أما التنسيق باستخدام CSS فهو مثل التنسيق لأي قائمة أخرى يتم عملها باستخدام HTML من خلال التحكم بتنسيق عناصر ul, li, a و التي تعرض القائمة في HTML

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

.ux-menu-container {
    position: relative;
}
 
.ux-menu,
.ux-menu ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}
 
.ux-menu li {
    position: relative;
    float: left;
}
 
.ux-menu ul {
    position: absolute;
    top: 0;
    left: 0;
}
 
.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    zoom: 1;
    z-index: -1;
    filter:mask();
}
 
.ux-menu-vertical .ux-menu-item-main {
    clear: left;
}
 
.ux-menu a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #432;
    border-left: 1px solid #e3dad1;
    border-top: 1px solid #e3dad1;
    border-bottom: 1px solid #e3dad1;    
    background: #f3efec url('images/menu-item-bg.png') repeat;
    font-size: 12px;
    line-height: 12px;
    padding: 10px 14px;
}
 
.ux-menu a.ux-menu-link-last {
    border-right: 1px solid #e3dad1;
}
 
ux.menu ul a {
    width: 100%;
}
 
.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
    border-color: #d2e3f4;
    background: url(images/'menu-item-bg-over.png') repeat;
    outline: 0;
}
 
.ext-ie .ux-menu-clearfix {
    zoom: 1;
}
 
.ux-menu-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.ux-menu a.ux-menu-link-parent {
    padding-right: 24px;
    min-width: 1px;
}
 
.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
    border-bottom: 0px;    
    border-right: 1px solid #e3dad1;
}
 
.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
    border-bottom: 1px solid #e3dad1;
}
 
.ux-menu-arrow {
    display: block;
    width: 8px;
    height: 6px;
    right: 10px;
    top: 14px;
    position: absolute;
    background: url('images/menu-arrow-down.png') no-repeat;
    font-size: 0;
}
 
.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow  {
    width: 6px;
    height: 8px;
    top: 13px; 
    background: url('images/menu-arrow-right.png') no-repeat;
}
 
.ext-border-box .ux-menu-arrow {
    top: 17px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
    top: 16px;
}
 
.ux-menu ul.ux-menu-hidden {
    display: none;
}


عرض حي Demoتنزيل