مرحبا..
تعرفون طبعا القوائم الي تفتح منها وائم فرعيه بمجرد مرور الماوس عليها صح؟
شوفوا الصوره بالمرفقات
اليوم يأقول لكم كيف ندمجها مع ال بي اتش بي
بمعنى انه لو لديك جدول اقسام وجدول اقسام فرعيه لكل قسم ستستطيع عملها بهذه القائمه
طبعا فائدتها انها توفر عليك الصفحات والباندويث .. افضل من انك تضغط على القسم وبعدها تذهب لثفحه اخرى فيها الاقسام الفرعيه والخ..
المهم الان خلوني اعطيكم الكود العادي (بدون بي اتش بي) لهذه القائمه الي بتشوفونها في المرفقات..
ملاحظه: القائمه معموله على اساس css
هذا الكود يوضع في الراس بين وسمي ال head
كود:
<style type="text/css">
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}
#csstopmenu li{
float: left;
position: relative;
}
#csstopmenu a{
text-decoration: none;
}
.mainitems{
border: 1px solid black;
border-left-width: 0;
background-color: #D8FE89;
}
.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}
.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #EEFFCC;
border: 1px solid black;
}
.submenus li{
width: 100%;
}
.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}
html>body .submenus li a{ /* non IE browsers */
width: auto;
}
.submenus li a:hover{
background-color: yellow;
color: black;
}
#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}
#csstopmenu li:hover ul, li.over ul {
display: block;
}
html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
</style>
<script type="text/javascript">
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;
</script>
طبعا من خلال ال css تستطيع التحكم بالالوان والخطوط والقائمه والقائمه الفرعيه .. جرب غير الاعدادات خصوصا عرص القائمه الفرعيه ومقدار الازاحه واوصل للسكل الي تريده.
وهذا كود القائمه:
كود:
<ul id="csstopmenu">
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://swalif.net">العنوان الرئيسي الاول</a></div>
<ul class="submenus">
<li><a href="رابط">فرعي اول</a></li>
<li><a href="رابط">فرعييييييي</a></li>
<li><a href="رابط">فرعي فرعي فرعي</a></li>
<li><a href="رابط">فرعييي</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://swalif.net">الرئيسي الثاني</a></div>
<ul class="submenus" style="width: 14em">
<li><a href="رابط">فرعي.</a></li>
<li><a href="رابط">فرعي</a></li>
<li><a href="رابط">فرعي</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks">الرئيسي الثالث</div>
<ul class="submenus">
<li><a href="رابط">فرعي</a></li>
<li><a href="رابط">فرعي</a></li>
<li><a href="رابط">فرعي</a></li>
<li><a href="رابط">فرعي</a></li>
</ul>
</li>
</ul>
طبعا القائمه واضحه وسهلة الفهم.. لاحظ ان العنوان الرئيسي الثالث لم اضع له رابط .. اي انه لا يوصلك لشئ اذا ضغطت عليه .. فقط اذا مررت الماوس عليه ستفتح لك القائمه التي تحته.
في الرد القادم سنستخرج القائمه من قاعدة البيانات
تحياتي