كود اخفاء القائمة الجانبية بضغطة زر

اليوم ابتكرت طريقة جديده للقائمة الجانبية او اي بلوك سواء في المنتدى او غيره بحيث تشاهد القائمة وبجانبها زر خاص بها اضغط اول مرة تختفي القائمة ويبقى الزر موجود .. مع الضغطه الثانية تظهر القائمة الجانبية

وهذا جميل جدا ويتعمل مع الفايرفوكس بشكل تدرج الإظهار وتتلاشى بالإختفاء افضل من الإكسبلورر



http://anaddaf.myqnapcloud.com/PC-ND...4.imgcache.jpg



بسم الله نبدأ







ارفع ملفات السكربت script في موقعك واضبط روابط السكربتات في الهيدر header بشكل صحيح

كود:

---

<script type="text/javascript" src="http://www.XXXXX.com/yuiloader-dom-event.js"></script>
<script type="text/javascript" src="http://www.XXXXX.com/vbulletin-core.js"></script>
<script type="text/javascript" src="http://www.XXXXX.com/animation-min.js"></script>
<script type="text/javascript" src="http://www.XXXXX.com/vbulletin-sidebar.js"></script>
<script type="text/javascript" src="http://www.XXXXX.com/floating_window_with_tabs.js"></script>

---

حيث XXXXX هو نطاق موقعك


ضع حركات الإستايل بهذه الطريقة

كود:

---

   
    <!-- do not edit -->
    <style type="text/css">
    <!--
   
   
    #sidebar_container {
    float:right;
    padding:17px 0;
    margin-bottom:3em;

}


#sidebar_button {
    display:block;
    margin-top: 40px;
    float:right;
    margin-right:-28px;
    _margin: 40px 0 0 0;
    _display: inline-block;
}

#sidebar_button {
    _display: inline;
}
#sidebar_container.sidebarleft #sidebar_button {
    float:right;
    margin-left:-28px;
}



#sidebar_container .underblock {
    height:3px;
    background:transparent none  ;
}

#sidebar_container .blocksubhead {
    background:transparent none;
    height:/* ~~cannot perform math on mixed units ~~ found (px,pt) in 12pt*1.550+2px */;
    padding: 5px 6px;
    border:none;
    outline:none;
    font-weight:bold;
}

#sidebar_container .blocksubhead span.blocktitle {
    width:185px;
    display:block;
    white-space:nowrap;
    float:right;
    overflow:hidden;
    padding-left:3px;
}

#sidebar_container .blocksubhead img {
    vertical-align:middle;
    float: right;
}

#sidebar_container .blocksubhead img.inlineimg {
    float: none;
    position: relative;
    top: -2px;
}
/* Add a "middle" font size, between default and small */
#sidebar_container .blocksubhead.smaller {
    font:  bold 12pt Times New Roman, Arial, Tahoma, Verdana, Geneva;
}

#sidebar_container .blockrow {
    font-size:12pt;
}

#sidebar_container .blockrow .meta {
    font-size:12pt; font: bold 12pt Times New Romanpt;
}

#sidebar_container .blocksubhead a.username {
    padding-left:20px;
}

#sidebar_container .formcontrols .blockrow label {
    width:auto;
}

#sidebar_container .advanced.blockfoot {
    padding:6px;
    border-bottom:none;
    font-size:88%;
    font-weight:bold;
    background: transparent;
}
#sidebar_container .searchblock .advanced a {
    line-height:2;
}

#sidebar_container .searchblock .advanced .button {
    float:left;
}


#sidebar_container > ul {
    background-color:transparent;
    float:right;
    width:100%;
}

    -->
    </style>
    <!-- / do not edit -->   

                     

---

نأتي للبودي ووضعية الكود كالتالي

كود:

---

        <div style="width: 200px;height:155px" >
        <a  href="#">
           
            <img id="sidebar_button" border=0 src="http://www.XXXXX.com/tab-collapsed.png" alt="">
           
        </a>
        <ul style="opacity: 1;" id="sidebar">

---

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


بعد هذا ضع هذا الكود التالي نهاية الأكواد في القالب المراد تعديله

كود:

---

</ul>
   

<div id="footer" class="floatcontainer footer"></div></div>

 <!-- closing div for body_wrapper -->
 
 
<script type="text/javascript">
        var sidebar_align = 'right';
        var content_container_margin = parseInt('270px');
        var sidebar_width = parseInt('250px');
    </script>
 

---

لاحظ الكودين السابقين ( var content_container_margin = parseInt('270px');
var sidebar_width = parseInt('250px');)

تستطيع تعدل المسافة بين القائمة والأقسام الأخرى

وبهذا انتهينا من عمل السكربت


{..تحميل السكربتات ..}