قائمة عرضية CSS + مثال

**Admin** · **Admin** الجمعة سبتمبر 16, 2011 3:58 pm

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

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

مثال

قائمة عرضية CSS + مثال 13006697

بسم الله نبدأ الشرح

في البداية

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

طبعاً عن طريق ftp او من الكونترول بنل الخاصة بموقعك قائمة عرضية CSS + مثال Nosweat

( ما يحتاج شرح )

ومن ثم نشتغل على رواق قائمة عرضية CSS + مثال Bleh

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

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

الكود:: <div id="tabs"> <ul> <li></li> <li><a href="http://www.faisaly.net"><span>الرئيسية</span></a></li> <li><a href="http://www.faisaly.net/vb/index.php"><span>المنتدى</span></a></li> <li><a href="#"><span>Menu 3</span></a></li> <li><a href="#"><span>Menu 4</span></a></li> <li><a href="#"><span>Menu 5</span></a></li> <li><a href="#"><span>Menu 6</span></a></li> </ul>

مع تغيير رابط http://www.faisaly.net الى رابط موقعك

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

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

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

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

الكود:: <style type="text/css"> /*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("images/left.png") no-repeat left top; margin:0; padding:0 0 0 6px; text-decoration:none; } #tabs a span { float:right; display:block; background:url("images/right.png") 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>

وسلامتكم

الشرح من قبلي ولا أعلم ان كان مكرر ولكن الايقونات اكيد تختلف قائمة عرضية CSS + مثال Nosweat

قائمة عرضية CSS + مثال

قائمة عرضية CSS + مثال

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

التسجيل

تسجيل الدخول