[Css] حـــصريــآً .. قائمة عرضية بإستخدام الوسم button :: برمجة سواليف كام ::

[admin]

http://www.dzbatna.com/images/icons/iconrote.gif [Css] ط*ظ€ظ€ظ€طµط±ظٹظ€ظ€ط¢ظ‹ .. ظ‚ط§ط¦ظ…ط© ط¹ط±ط¶ظٹط© ط¨ط¥ط³طھط®ط¯ط§ظ… ط§ظ„ظˆط³ظ… button :: ط¨ط±ظ…ط¬ط© ط³ظˆط§ظ„ظٹظپ ظƒط§ظ… :: (http://www.dzbatna.com/t1750265/)



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

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

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

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

اليوم وحصرياً من منتديات ديزاد باتنة ..~

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

والأن مع رؤية مثال على ذلك :
أنصح وبشدة إستخدام متـصفح الفـآير فوكس في تصفح هذأ العمل :
القائمة في المنتديات الـ Vb ..
http://forum.swalifcam.com/index.php?styleid=41
ملاحظة للإبتعاد عن الشبهات : الإستايل style ليس من تصميم سواليف كام وإنما تصميم الأخ خادم الإسـلام وتطوير سواليف كام .

مشـآهدة القـآئمة بشكل منفصل :
http://www.swalifcam.com/Botems.html

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

<code style="white-space:nowrap"> <code> /* بـــرمــــجـــــة ســــــــــوآلـــــــــيــــف كــــــآمـ */
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 يكسل */
/* هذا الكود code فائدته عمل زاوية دائرية */
-moz-border-radius: 5px;
padding: 5px;
-selection -border-radius: 5px;



margin-top: 10px;
/* هذا الكود code فائدته عمل زاوية دائرية */

}
/* هذأ الكود code بعد مرور الماوس على الرابط */
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;

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

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

<code style="white-space:nowrap"> <code> <!-- By Swalifcam.com -->
<div id="box">
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />الرئيسية</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />المنتدى forum</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />الدليل</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />الدردشة</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />الفديوهات</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />رابط</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />دروس</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />Css</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />Xhtml</button></a>
<a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />java</button></a>
</div>
<!-- By Swalifcam.com -->
</code> </code>

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

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

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

<code style="white-space:nowrap"> <code> <a href="#"><button><img border="0" src="http://upload.dzbatna.net/upfiles/xRV92885.png" />java</button></a>
</code> </code>

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

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

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

تحياتي ..
www.swalifcam.com (http://forum.swalifcam.com)








ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©