ظ‚ط§ط¦ظ…ط© ط¹ط±ط¶ظٹط© CSS + ظ…ط«ط§ظ„


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


أقدم لكم اخواني درس مفصل اضافة قائمة عرضية بخاصية CSS وتستطيع اضافة روابطك المهم او أي رابط

مثال




بسم الله نبدأ الشرح طريقة



في البداية



نرفع الصور المرفقة الى مجلد Images الموجود داخل منتداك

طبعاً عن طريق ftp او من الكونترول بنل الخاصة بموقعك ( ما يحتاج شرح طريقة )







ومن ثم نشتغل على رواق

نفتح لوحة التحكم الخاصة بالمنتدى forum

ونبحث بالقوالب على ىnavbar ونضيف في بدايتها


رمز Code:
<div id=&quot;tabs&quot;> <ul> <li></li> <li><a href=&quot;http://www.faisaly.net&quot;><span>الرئيسية</span></a></li> <li><a href=&quot;http://www.faisaly.net/vb/index.php&quot;><span>المنتدى forum</span></a></li> <li><a href=&quot;#&quot;><span>Menu 3</span></a></li> <li><a href=&quot;#&quot;><span>Menu 4</span></a></li> <li><a href=&quot;#&quot;><span>Menu 5</span></a></li> <li><a href=&quot;#&quot;><span>Menu 6</span></a></li> </ul> </div>
مع تغيير رابط http://www.faisaly.net الى رابط موقعك

وتغيير <a href=&quot;#&quot;> علامة المربع لرابط موقعك

ولاتنسى تغيير ايضاً كلمة Menu 3 لاسم القسم المراد وضعه

ومن ثم نذهب الى
تعاريف CSS الإضافية/Additional CSS Definitions

ونضيف بالمربع الثاني في نهايته

رمز Code:
<style type=&quot;text/css&quot;> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #tabs { float:right; width:100%; font-size:93%; line-height:normal; border-bottom:1px solid #666; margin-bottom:1em; /*margin between menu and rest of page*/ overflow:hidden; } #tabs ul { margin:0; padding:10px 10px 0 0px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:right; background:url(&quot;images/left.png&quot no-repeat left top; margin:0; padding:0 0 0 6px; text-decoration:none; } #tabs a span { float:right; display:block; background:url(&quot;images/right.png&quot no-repeat right top; padding:6px 15px 4px 6px; margin-right:2px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style>
وسلامتكم

الشرح طريقة من قبلي ولا أعلم ان كان مكرر ولكن الايقونات اكيد تختلف









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©