كيف تعمل قائمه منسدلة css قائمة منسدله css

HOME

المنتدى - دروس css - دروس البي اتش بي - قوالب CSS - دروس السيرفر - العاب فلاشيه - برامج مهمه جدا للويندوز - برنامك فك تشفير مع الشرح -

لمشاهدة مدونة كتوم ودروس css اضغط هنا

الدرس السابع

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

بسم الله الرحمن الرحيم

اليوم درسنا مهم جدا

قائمه منسدله رائعه كالتالي

عند مرور الماوس على القائمه تفتح نافذه فيها قائمه روابط وبامكانك تغيير الالوان عن طريق style.css

اذا لنبدا بالدرس :

نضع الكود التالي في منطقه body

<ul id="pop">

<li><a href="#">موقع المحبين</a>

<ul>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
</ul>

</li>

<li><a href="#">موقع المحبين</a>

<ul>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
</ul>

</li>

<li><a href="#">موقع المحبين</a>

<ul>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
<li><a href="#">alm7ben.com</a></li>
</ul>

سوف تصبح هكذا

ولاحظ يوجد اربع قوائم كل قائمه فيها ثلاث روابط

الان باقي ملف style.css نضيف الكود التالي فقط اختصرت لكم

/* Dropdowns Menu */ #pop, #pop li ul { margin: 0; padding: 0; list-style: none; } #pop li { float: right; margin: 0; padding: 0; position: relative; } #pop li li { float: right; width: 175px; margin: 0; padding: 0; } #pop li a, #pop li a:link, #pop li a:visited { font: normal 12px Tahoma; color: #FFFFFF; text-decoration: none; background: #C27850; display: block; padding: 5px 12px; } #pop li a:hover, #pop li a:active { color: #FFF; display: block; background: #D73877; padding: 5px 12px; } #pop li li a, #pop li li a:link, #pop li li a:visited { background: #C2536D; width: 175px; margin: 0; padding: 5px 12px; border-top: 1px solid #E8E8E8; } #pop li li a:hover, #pop li li a:active { background: #8B8576; } #pop li ul { position: absolute; width: 199px; display: none; right: 0; } #pop li:hover ul, #pop li.sfhover ul { display: block; }

بعد ماضفنا الكود داخل ملف style.css نروح للصفحه نضع داخل منطقه <head> كود جافا سكربت

sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("pop").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

لتحميل القائمه المنسدلة

اضغط هنا

انتهينا من الدرس شكرا لمتابعتكم

لمشاهدة مكتبة دروس css------> هنـــا