السلام عليكم ورحمه الله وبركاته
تقدم لكم منتديات التصميم الحر
قائمة منسدلة بتقنية css
مثال للقائمة
اضغط هنا
الملف مرفق
شرح طريقة التركيب 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>
مع تغير ما يناسب موقعك
تحياتي لكم
اخوكم حاتم