قائمة عربية منسدله

السلام عليكم ورحمة الله تعالى وبركاته ...~

صـــبــ ح ــكم , مـــ س ـــآكـم الله بــآلـ خ ــــيـر ..~

عًدنـآ إليـكـم بمـآ هو جديد في عالم الـ Css ..~

نــفـ ك ــر نـخًطط , نستنتج أفكـآر جديدة ..~

اليوم وحصرياً من معهد ترايدنت ..~

إنشأء قــآئمـة عـرضية بواسطة وسم الـ button بدون أي تدخل من وسم الـ ul ..

والأن مع أكواد الـ Css الإضافية :

رمز PHP:

/* بـــرمــــجـــــة ســــــــــوآلـــــــــيــــف كــــــآمـ */
button {
border: 1px solid #f1f1f1;/*هذأ هو الحد لكل مربع من المربعات الرئيسية ..إلخ*/
font-family: tahoma;/*نوع الخط المستخدم*/
color: #f1f1f1;/*لون الخط*/
background-color: #181818;/*خلفية الروابط*/
width: 95px;/*عرض الروابط*/
height: 30px;/* إرتفاع الروابط */
float: right;/* محاذاه الرابط*/
margin-right: 33px;/* محاذاه الروابط من الجهه اليمنى */
padding: 5px;/* التباعد بين الروابط بمقدار 5 يكسل */
/* هذا الكود فائدته عمل زاوية دائرية */
-moz-border-radius: 5px;
padding: 5px;
-selection -border-radius: 5px;
margin-top: 10px;
/* هذا الكود فائدته عمل زاوية دائرية */

}
/* هذأ الكود بعد مرور الماوس على الرابط */
button:hover{
background-color: #5c5c5c;
color: #000;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#5c5c5c, #f1f1f1);
box-shadow: inset 0px 0px 10px #58DAE4;
-webkit-box-shadow: inset 0px 0px 10px #858585;
-moz-box-shadow: inset 0px 0px 10px #858585;

}
/* خصائص الصندوق الكامل الذي يحتويه الروابط */
#box {
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
background-color: #333333;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #000;
direction: rtl;
position: fixed;
top: 500px;
bottom: 0px;
}
img{
margin-left: 5px;

}
/* بـــرمــــجـــــة ســــــــــوآلـــــــــيــــف كــــــآمـ */

والأن مع كلاسات الـقائمة :

رمز PHP:


<div id="box">
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />الرئيسية</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />المنتدى</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />الدليل</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />الدردشة</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />الفديوهات</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />رابط</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />دروس</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />Css</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />Xhtml</button></a>
<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />java</button></a>
</div>


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

نتوجه إلى التحكم بالإستايلات --> البحث في القوالب --> header --> نضع الكلاسات في أخر القالب ... بعد ذلك توجه إلى رئيسي Css وضع كود الـ Css المرفق أعلاه في خيارات الـ Css الإضافية

والأن مع شرح كيفية تغير الروابط :

رمز PHP:

<a href="#"><button><img border="0" src="http://upload.traidnt.net/upfiles/xRV92885.png" />java</button></a>

نلاحظ في الكلاسات علامة الهـآش # نقوم بحذفها ونضع الرابط الذي نريده ..
ونشاهد أيضاً ..
المنتدى و الرئيسية ... إلخ قم فقط بالتعديل عليها ..~
ووضع العنوان المناسب لك ..~

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

فإن أصبت فمن الله وإن أخطأت فمن الشيطان ..~

» المنافسة ما زالت قائمة في إيطاليا
» كيف امنع اسمي من الظهور في قائمة اسماء المشتركين؟
» موقع مانشستر يونايتد على الانترنت يزيد الاشاعات ويضع اسم مسعود اوزيل ضمن قائمة الفريق
» تحديث لمتجر غوغل بلاي على أندرويد يتيح حذف التطبيقات من قائمة “جميع التطبيقات”