طريقة تصميم قائمة عمودية لبلوك القائمة الرئيسية وقائمة الأعضاء

§¤°بسم الله الرحمن الرحيم°¤§

اللهم صل وسلم على سيدنا محمد وعلى آله وصحبه أجمعين




طريقة تصميم قائمة عمودية لبلوك القائمة الرئيسية وقائمة الأعضاء





طبعا الشغل راح يكون على ملف style.css
وللتذكير
اسطر القائمة الرئيسية هي :
/* block main menu */
#mainmenu { font-size: 12px-font-weight: bold-}
#mainmenu a {
color: #000000-
display: block-
margin: 0-
padding: 4px 18px 4px 4px-
border-bottom: 1px dotted #cccece-
background: url(../images/bullet.png) no-repeat right-
}
#mainmenu a:hover {
color: #880000-
background: url(../images/bullet-h.png) no-repeat right-
}
#mainmenu a.menuTop {}
#mainmenu a.menuMain {}
#mainmenu a.menuSub {
padding-right: 20px-
color: #880000-
background: none-
border: none-
background: url(../images/bullet-ms.png) no-repeat right-
}
#mainmenu a.menuSub:hover {
color: #000000-
padding-right: 22px-
}


اما اسطر قائمة الأعضاء هي :
/* block user menu */
#usermenu { font-size: 12px- font-weight: bold- }
#usermenu a {
color: #000000-
display: block-
margin: 0-
padding: 4px 18px 4px 4px-
border-bottom: 1px dotted #cccece-
background: url(../images/bullet.png) no-repeat right-
}
#usermenu a:hover {
color: #880000-
background: url(../images/bullet-h.png) no-repeat right-
}
#usermenu a.menuTop {}
#usermenu a.highlight {background-color: #DADADA-}



سوف نبدأ بالقائمة الرئيسية

لنتذكر هكذا الشكل قبل ان نبدأ بالتعديل










طبعا انت لست مجبر بجميع الخطوات وكل شخص على ذوقه لكن انا راح اعطيكم الطريقة العامة

لازالة الخط السفلي امسح
border-bottom: 1px dotted #cccece-


ليصبح هكذا











الان سنضع خلفية للقائمة وخلفية المرور عليه
سنضعها على شكلين
ان تكون خلفية الوان وان تكون صور

أولا : ألوان

لتحديد لون الخلفية اضف هذا السطر
background: #880000 url(../images/bullet.png) no-repeat right-

بدال
background: url(../images/bullet.png) no-repeat right-

وعدل الى اللون الذي تريده

وتستطيع استبدال الصورة الجانبية من نفس الكود

ولتغيير لون المرور على الرابط استبدال
#mainmenu a:hover {
color: #880000-
background: url(../images/bullet-h.png) no-repeat right-
}

بهذا السطر
#mainmenu a:hover {
color: #ffffff-
background: #880000 url(../images/bullet-h.png) no-repeat right-
}


وكما قلنا عدل الالوان الى ماتريد ويمكنك تغيير الصورة الجانبية

وايضا عدل على الوان الخطوط كما شرحنا سابقا

مثال سريع










وهذا ناتج نهائي لعمل قائمة عمودية بتمعن





ولمن اراد مثل الاطار المنقط اضف هذا السطر الى المكان الذي تريد ظهوره فيه
border-left: 1px dotted #cc0000-
border-right: 1px dotted #cc0000-
border-top: 1px dotted #cc0000-
border-bottom: 1px dotted #cc0000-


ثانيا : عن طريق الصور
الان صمم الخلفية على حسب اطار البلوك لديك
الصورة الاولى يجب ان تكون الخلفية ويكون اسمها bg-vmenu وصيغته png
والصورة الثانية المرور على الرابط ويكون اسمها bg-vmenu-h وصيغته png
او تستطيع اضافة اسم اخر للصورة لكن عليك اجراء التغير ايضا بكود الـcss
مثال سريع قمت بتصميمه
للصورة الاولى وهي الخلفية


وللصورة الثانية وهي المرور فوق الرابط


طبعا هاي صور صممتهم عالسريع ويمكنك انت الابداع في التصميم

الان علينا استبدال
#mainmenu a {
color: #000000-
display: block-
margin: 0-
padding: 4px 18px 4px 4px-
background: #ffffff url(../images/bullet.png) no-repeat right-
}



بهذا السطر
#mainmenu a {
color: #000000-
display: block-
margin: 0-
padding-right : 24px -
line-height: 22px-
background: url(../images/bg-vmenu.png) no-repeat right-
height: 20px-

}


ويمكنك منه تحديد اسم الخلفية وارتفاعه وتحديد تباعد النص من اليمين والاعلى


ولتغيير خلفية المرور على الرابط استبدال
#mainmenu a:hover {
color: #ffffff-
background: #000000 url(../images/bullet-h.png) no-repeat right-
}

بهذا السطر
#mainmenu a:hover {
color: #ffffff-
background: url(../images/bg-vmenu-h.png) no-repeat right-
height: 20px-
}


ونفس الطريقة تستطيع التعديل على اسم الخلفية والارتفاع ولون الخط

الناتج النهائي