Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

لو كنت لا تريد أو لا تملك الصلاحية لترقية المتصفح يمكنك أن تستمر في التصفح على الرحب و السعة لكن تذكر قد لا تتمكن من استعراض بعض خدمات الموقع بالشكل المطلوب . بالطبع يمكنك إخفاء هذه الرسالة و تستمر في التصفح و لن تظهر لك هذه الرسالة مرة أخرى .

Screenshot

قائمة عمودية متفرعة

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

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

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

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


<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 مع التعريب و التعديل ..

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , ,