وصف الموضوع

باستخدام الجافا سكريبت و ال css قائمة عمودية تتفرع إلى قوائم أخرى

الأوسمة :
CSS| html| قائمة| xhtml| عمودية
في التصنيفات :CSS

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

الشفرة :
<a href="http://qatardr.net/class/913" rel="bookmark" > قائمة عمودية متفرعة</a>

اضغطCtrl-C أو Apple-C  للنسخ

الوصلة ستظهر كالتالي :
قائمة عمودية متفرعة

هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]

يمكنك مشاهدة مثال هنا

أولا :الحاوية

سننشأ حاوية لضم القائمة

<div id="menu">

المحتوى هنا

</div>

ثانيا : القوائم

القوائم ستكون عبارة عن قوائم منقطة ..كل قائمة ستكون بهذا الشكل

<dt onmouseover="javascript:showorhide(''mymenu1'');"><a href="#">قائمة  1</a></dt>

<dd id="mymenu1" onmouseover="javascript:showorhide(''mymenu1'');" onmouseout="javascript:showorhide();">

<ul>

<li><a href="#">قائمة فرعية  1.1</a></li>

<li><a href="#">قائمة فرعية 1.2</a></li>

<li><a href="#">قائمة فرعية 1.3</a></li>

</ul>

</dd>

ثالثا : الجافا سكريبت Javascript

عند مرور الفأرة على القائمة سيتم استدعاء دال الجافا سكريبت التالية

<script type="text/javascript">

<!--

window.onload=showorhide;

function showorhide(id) {

var d = document.getElementById(id);

for (var i = 1; i<=10; i++) {

if (document.getElementById(''mymenu''+i)) {document.getElementById(''mymenu''+i).style.display=''none'';}

}

if (d) {d.style.display=''block'';}

}

//-->

</script>

سنستدعي الدالة showorhide عند تحميل الصفحة

 window.onload=showorhide; 

سننشأ الدالة showorhide و التي تأخذ المتغير id و الذي سيكون التعريف او id للقائمة وفي حالتنا mymenu1 , mymenu… الخ

function showorhide(id) { 

لو تم تمرير متغير للدالة id سيتم استدعاها في المتغير d

ثم في التالي سنمر على كل القوائم في الصفحة و يتم تغير خاصية display إلى none و بالتالي تكون مخفية السطر البرمجي يفترض انه لن يكون لديك أكثر من عشر قوائم أساسية لو كانت لديك اكثر غير الرقم 10 إلى الرقم الذي تريد

for (var i = 1; i<=10; i++) {

if (document.getElementById(''mymenu''+i)) {document.getElementById(''mymenu''+i).style.display=''none'';}

}

و الآن لو كان هناك قيمة للمغير d اي اننا مررنا قيمة ل id اي اننا مررنا الفأرة إلى القائمة

سيتم اعطائها قيمة block للخاصية display و بالتالي ستظهر ( ابطال للامرالسابق و الخاصية none)

if (d) {d.style.display=''block'';}

مع ملاحظة أن اسم كل قائمة يجب أن يكون mymenu متبوع برقم القائمة 1 ،2،3 و هكذا ..

id="mymenu1"

رابعا : css

سنعطي الخصائص الشكلية للقائمة بواسطة css

<style type="text/css">

<!--

body {

font-family: Tahoma, arial, sans-serif;

font-size: 90%;

color: black; direction:rtl

}

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute;

top: 1em;

width: 10em; right:1em

}

#menu dt {

cursor: pointer;

background: #A9BFCB;

height: 20px;

line-height: 20px;

margin: 2px 0;

border: 1px solid gray;

text-align: center;

font-weight: bold;

}

#menu dd {

position: absolute;

z-index: 100;

margin-top: -1.4em;

width: 10em;

background: #A9BFCB;

border: 1px solid gray; right:8em

}

#menu ul {

padding: 2px;

}

#menu li {

text-align: center;

font-size: 85%;

height: 18px;

line-height: 18px;

}

#menu li a, #menu dt a {

color: #000;

text-decoration: none;

display: block;

}

#menu li a:hover {

text-decoration: underline;

}

-->

</style>

لن نتطرق للشرح الكامل لشفرة css لكن سنتحدث عن الأشياء المميزة

في الشفرة التالية وضعنا القيمة 1em للخاصية right و ذلك لظهور القائمة في اليمين لو اردنا القائمة في اليسار نغير right إلى left

#menu {

position: absolute;

top: 1em;

width: 10em;

right:1em

}

لو غيرت الاتجاه في الشفرة السابقة عليك ان تغير الاتجاه في الشفرة الثالية لتظهر القوائم الفرعية في الاتجاه الصحيح

#menu dd {

position: absolute;

z-index: 100;

margin-top: -1.4em;

width: 10em;

background: #A9BFCB;

border: 1px solid gray;

right:8em

}

و تذكر بواسطة css يمكنك التحكم بالألوان و الخطوط … الخ

الفكرة مبنية على القائمة هنا : http://tutorials.alsacreations.com/deroulant/cssmenu4.htm مع التعريب و التعديل ..

• اضيف  في 5 فبراير 2006
• الزوار : [ 3,313 قارئ ]
• هذا الموضوع مرخص وفق ترخيص Creative Commons.[ معلومات إضافية حول الترخيص بالعربية]