القائمة الجانبية المتحركة بواجهة المنتدى طريقه جميله

[Bus News]

مساء الخير

اليوم بنطرح لكم القائمه الجانبيه بالروابط السريعه بواجهة المنتدى مع المساحه الاعلانية

بترك لكم التفصيل بالصورة


هنا تظهر القائمة الجانبيه بالضغط عليها راح تفتح معاك الروابط النصيه والاعلان الخاص بالقائمه


http://www.rawabetvb.com/vb/attachment.php?attachmentid=61999&stc=1&d=1297197275



بعد الضغط على زر القائمه


http://www.rawabetvb.com/vb/attachment.php?attachmentid=62000&stc=1&d=1297197275


طريقة التركيب

بالمرفقات يوجد عدد اثنين ملف

mootools.js
side-bar.js

قم بفك الضغط عنها ورفعها لداخل المنتدى بمجلد (clientscript )

ارفع كل مابداخل ملف الصور images على المسار التالي

vb/images





الان نقوم بالتعديل على الستايل الي نبي القائمه تظهر عليه

أفتح قالب FORUMHOME

وبحث عن

كود:
$header
$navbar
اسفل منها مباشرة اضف الكود التالي بعد تعديل الروابط النصيه وروابط موقعك

كود:









قائمةالموقع






الصفحة الرئيسية

الرسائل

أتصل بنا

مواقع مفيدة

قوانين واحكام

رابط نصي



</p>





</div>

</div>
اعمل حفظ

والان توجهة الى
تعاريف CSS الإضافية/Additional CSS Definitions

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


كود:
body{
position:relative;
paddign:0px;
font-size:100%;
}

h2{
color:#FFFFFF;
font-size:90%;
font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin:10px 10px 10px 10px;
font-weight:bold;
}

h2 span{
font-size:105%;
font-weight:normal;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}

li a{
width:100%;
}

li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

li a:hover{
color:#FFFFFF;
text-decoration:underline;
}

#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}
اعمل حفظ


افتح قالب headinclude
وفي اخر القالب اضف التالي

كود:


وعمل حفظ وروح شوف المنتدى عندك

واي مشكله حاضر




شاركني بالعمل الاخت هنوفه (http://www.rawabetvb.com/vb/member.php?u=35599) الله يعطيه الصحة والعافيه</div>
الصور المصغرة للصور المرفقة http://www.rawabetvb.com/vb/attachment.php?attachmentid=61999&stc=1&thumb=1&d=1297197275 (http://www.rawabetvb.com/vb/attachment.php?attachmentid=61999&d=1297197275) http://www.rawabetvb.com/vb/attachment.php?attachmentid=62000&stc=1&thumb=1&d=1297197275 (http://www.rawabetvb.com/vb/attachment.php?attachmentid=62000&d=1297197275)
الملفات المرفقة http://www.rawabetvb.com/vb/images/attach/zip.gif images.zip&rlm; (http://www.rawabetvb.com/vb/attachment.php?attachmentid=62001&d=1297198313) (16.6 كيلوبايت) http://www.rawabetvb.com/vb/images/attach/zip.gif clientscript.zip&rlm; (http://www.rawabetvb.com/vb/attachment.php?attachmentid=62002&d=1297198326) (6.9 كيلوبايت)