رفتن به مطلب
پشتیبانی سایت ساز IPB/IPS فارسی
خدمات و محتویات منتشر یافته در IPSFarsi

آموزش : اضافه نمودن منو Charm Bar

علی مددی

ارسال‌های توصیه شده

  • مدیر کل بازنشسته سایت
علی مددی

علی مددی 1689

ارسال شده در
  • مدیر کل بازنشسته سایت
ارسال شده در

سلام 

 

برای اضافه نمودن منو Charm Bar مراحل زیر را طی کنید...

 

post-1632-0-88435500-1391323554.jpg

 

 

از تمپلت قالب Global Templates بیت globalTemplate   قبل از کد زیر 

<body id='ipboard_body'>

 کدهای زیر را اضافه کنید 

<div class="showcharm" onmouseover="document.getElementById('charmbar').className='charmbar1'" onmousemove="document.getElementById('hidecharm').className='hidecharm1'"> </div><div id="hidecharmmenu" class="hidecharm0" onclick="document.getElementById('hidecharm').className='hidecharm0'; document.getElementById('hidecharmmenu').className='hidecharm0'; document.getElementById('ch1').className='charmmenu0 bodycolor'; document.getElementById('ch2').className='charmmenu0 bodycolor'; document.getElementById('ch4').className='charmmenu0 bodycolor'; document.getElementById('ch5').className='charmmenu0 bodycolor'"> </div><div id="hidecharm" class="hidecharm0" onmouseover="document.getElementById('charmbar').className='charmbar0'" onmousemove="document.getElementById('hidecharm').className='hidecharm0'"> </div><div id="charmbar" class="charmbar0">
<div class="menubar"></div>
<div style="display: table-cell; vertical-align: middle; height: 500px">

<div class="charm">
<a href="http://ipbfarsi.ir" target="_blank">
</br>
<img src="{style_images_url}/1.png" alt="" class='sizpic'/></a>
<br>AAA</div>

<div class="charm">
<a href="http://ipbtemplate.ir" target="_blank">
</br>
<img src="{style_images_url}/2.png" alt="" class='sizpic'/></a>
<br>BBB</div>

<div class="charm">
<a href="http://ipbfarsi.ir">
</br>
<img src="{style_images_url}/3.png" alt="" class='sizpic'/></a>
</br>CCC</div>

<div class="charm">
<a href="http://ipbtemplate.ir" target="_blank">
</br>
<img src="{style_images_url}/4.png" alt="" class='sizpic' /></a>
<br>DDD</div>

<div class="charm">
<a href="http://ipbfarsi.ir" target="_blank">
</br>
<img src="{style_images_url}/5.png" alt="" class='sizpic'/></a>
<br>EEE</div>

</div>
</div>

نکته : عکس منوهارو داخل پوشه تصاویر قالب قرار دهید که نام تصاویر با اعداد 1 تا 5 مشخص شده و بقیه موارد هم خیلی واضح است.

 

 

کدهای زیر را در اتنهای کدهای استایل قالب ( ipb_style ) اضافه نمایید.

.showcharm {z-index:9999;width:30px;height:100%;left:0px;top:0px;position:fixed;}
.hidecharm0 {z-index:-9999;width:0px;height:100%;left:0px;top:0px;position:fixed;}
.hidecharm1 {z-index:9996;width:100%;height:100%;left:0px;top:0px;position:fixed;}
.charmbar0 {z-index:10000;background: #2d2d2d;width: 100px;height: 100%;position: fixed;left:-100px;top:0px;vertical-align: middle;display:table;-webkit-transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);}
.charmbar1 {z-index:10000;background:#2d2d2d;width: 100px;height: 100%;position: fixed;left:0px;top:0px;vertical-align: middle;display:table;-webkit-transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);transition: all 400ms cubic-bezier(0.000, 0, 0, 1.000);}
.charmitem {width: 100px;height: 100px;vertical-align: middle;font-size: 15px;color: #a0a0a0;}
.charm {background:#2d2d2d;text-align: center;vertical-align:middle;display: block;width: 100px;height: 100px;color: #FFFFFF;}
.charm a, .chitem a {text-decoration:none;}
.charm:hover {background: #333333;}
.sizpic {width: 45px; height: 45px;}
.menubar{
background: #A51E1E;
height: 100%;
padding: 0px 3px;
}

با توجه به استایل می توانید سایز تصاویر ، رنگ و بقیه موارد را به دلخواه و سلیقه خود تغییر دهید...

 

دمو منو Charm Bar

 

 

موفق باشید... :)

لینک ارسال
به اشتراک گذاری در سایت های دیگر
IPLike

IPLike 66

ارسال شده در
ارسال شده در

به نظرم بهتره کنارش یه زبونه ای، چیزی بذاری . من که رفتم توی دموی سایتت سخت متوجه شدم که با بردن ماوس سمت چپ صفحه یهو اون کادر ظاهر میشه.

لینک ارسال
به اشتراک گذاری در سایت های دیگر
NaeemSameti

NaeemSameti 100

ارسال شده در
ارسال شده در

به نظرم بهتره کنارش یه زبونه ای، چیزی بذاری . من که رفتم توی دموی سایتت سخت متوجه شدم که با بردن ماوس سمت چپ صفحه یهو اون کادر ظاهر میشه.

سلام داداش، آره درست میگه ایشون.

لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

رفتن به فهرست موضوع ها

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...