قائمة منسدلة بشكل اقسم رووعه css (( تألق وخفف من اخطاء استايل styleك

[admin]

http://www.dzbatna.com/images/icons/smile.gif ظ‚ط§ط¦ظ…ط© ظ…ظ†ط³ط¯ظ„ط© ط¨ط´ظƒظ„ ط§ظ‚ط³ظ… ط±ظˆظˆط¹ظ‡ css (( طھط£ظ„ظ‚ ظˆط®ظپظپ ظ…ظ† ط§ط®ط·ط§ط، ط§ط³طھط§ظٹظ„ظƒ (http://www.dzbatna.com/t1906144/)



السلام عليكم ورحمه الله وبركاته

تقدم لكم منتديات التصميم الحر
قائمة منسدلة بتقنية css

مثال للقائمة

اضغط هنا (http://www.free4des.com/vb/free4descss.html)


الملف مرفق
شرح طريقة التركيب install
تلاقو ملفات psd مفتوح للون االقوائم

تقدرو تغيرو لونها
وسوو لها استبدال بصورة bg.bng
ارفع bng في المجلد الرئيسي للمنتدى
بعدين نروح للوحة تحكم المنتدى forum
الاستايل styleات والقوالب >> نختار استايل style المراد تعديل عليه >> بعدين نختار من القائمة css رئيسي
بعدين ننزل تحت ع اخر الصفحة نلاقي
تعاريف CSS الإضافية/Additional CSS Definitions
نضع هذا الكود code باخره

رمز PHP:

<code style="white-space:nowrap"> <code> <!--
body { background: #F0F0F0; margin: 0px; padding: 0; }
p { margin: 20px 0 20px 0; }
a { outline:none; }
/*//////////////////////////////
Free4Des.COM
//////////////////////////////*/
ul {
list-style:none;
padding:0;
margin:0;
}
ul li {
display:inline;
}
ul a {
font: 13px/14px Tahoma;
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: 100% 0;
padding:2px 13px 2px 2px;
text-decoration: none;
margin:0 0 3px 3px;
position:relative;
color: #F0F0F0;
display:block;
float:right;
}
ul a:hover {
background-position: 100% -20px;
color:#FFF;
}
ul a span {
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: 0 0;
position:absolute;
cursor:pointer; /*IE6,7*/
height:20px;
left:-9px;
width:9px;
top:0;
}
ul a:hover span {
background-position: 0 -20px;
}
/*/// Last item ///*/
ul li.last a { background-position: 100% -40px; color:#FFF; }
ul li.last a:hover { background-position: 100% -20px; }
ul li.last a span { background-position: 0 -40px; }
ul li.last a:hover span { background-position: 0 -20px; }

}
}
-->
</code> </code>

من هنا تستطيع تغير نوع الخط ولونه وشكله



===
تم نروح على الهيدر header
نضع هذا الكود code باخره


رمز PHP:

<code style="white-space:nowrap"> <code> <ul>
<li><a href="http://www.free4des.com/vb">الرئيسية <span></span></a></li>
<li><a href="http://www.free4des.com/hosting.html">استضافة HOTING <span></span></a></li>
<li><a href="http://www.free4des.com/seo.html">خدمة الارشفة indexation <span></span></a></li>
<li><a href="http://www.free4des.com/chat.html">دردشات كتابية<span></span></a></li>
<li><a href="http://www.free4des.com/design.html">خدمة التصميم <span></span></a></li>
<li><a href="http://www.free4des.com/vb/forumdisplay.php?f=37">دروس css <span></span></a></li>



<li><a href="http://www.free4des.net/">الدعم الفني<span></span></a></li>
<li><a href="http://www.free4des.com/sent.html">اتصل بنا<span></span></a></li>
<li class="last"><a href="http://www.free4des.com/vb/">منتديات التصميم الحر ( في خدمتكم دوما .. <span></span></a></li>
</ul>
</code> </code>

مع تغير ما يناسب موقعك

تحياتي لكم

اخوكم حاتم


المصدر: منتديات التصميم الحر ( free design (http://www.free4des.com/vb) - من قسم: شروحات التصميم بتقنية css (http://www.free4des.com/vb/forumdisplay.php?f=37)









ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif free4des.com.zip (http://www.traidnt.net/vb/attachments/588862d1311242436-free4des.com.zip) (18.8 كيلوبايت, عدد مرات المشاهدة 102 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©