أهلا وسهلا بك إلى hossam123.
أهلا وسهلا بك ضيفنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، وفي حال رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


hossam123 :: دعم منتديات احلى منتدى :: اكواد CSS

شاطر

رقم المشاركة : [ 1 ]
قديمالجمعة سبتمبر 16, 2011 3:58 pm
Admin
Admin
avatar


Time Online :
1d 20h 25m 49s

عدد المساهمات :
278

تاريخ التسجيل :
04/07/2011

الماجيك مسعد will become famous soon enoughالماجيك مسعد will become famous soon enough
غير متواجد
مُساهمةموضوع: قائمة عرضية CSS + مثال


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


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


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

مثال




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



في البداية



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

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













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

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

ونبحث بالقوالب على ى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>



وسلامتكم

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










الــرد الســـريـع
..




الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)




تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة