Box Scroll

Tasarım üstüne veya altına yapıştırın bu kodu...

Kod:

 <style type="text/css"> body{ color: #333; font-size: 11px; font-family: verdana; } a{ color: #fff; text-decoration: none; } a:hover{ color: #DFE44F; } p{ margin: 0; padding: 5px; line-height: 1.5em; text-align: justify; border: 1px solid #73A405; } #wrapper{ width: 500px; margin: 0 auto; } .box{ background: #fff; } .boxholder{    clear: both;    padding: 5px;    background-color: #9BCF24; } .tab{ float: left; height: 32px; width: 102px; margin: 0 1px 0 0; text-align: center; background: #8DC70A url(http://img28.xooimage.com/files/6/7/0/greentab-d5e84a.jpg) no-repeat; } .tabtxt{ margin: 0; color: #fff; font-size: 12px; font-weight: bold; padding: 9px 0 0 0; } </style> <script type="text/javascript" src="http://img46.xooimage.com/files/a/a/0/prototype.lite-d5e717.js"></script> <script type="text/javascript" src="http://img22.xooimage.com/files/a/6/5/moo.fx-d5e6fe.js"></script> <script type="text/javascript" src="http://img40.xooimage.com/files/e/d/c/moo.fx.pack-d5e70d.js"></script> <script type="text/javascript">
function init(){
    var stretchers = document.getElementsByClassName('box');
    var toggles = document.getElementsByClassName('tab');
    var myAccordion = new fx.Accordion(
        toggles, stretchers, {opacity: false, height: true, duration: 600}
    );
    //hash functions
    var found = false;
    toggles.each(function(h3, i){
        var div = Element.find(h3, 'nextSibling');
            if (window.location.href.indexOf(h3.title) > 0) {
                myAccordion.showThisHideOpen(div);
                found = true;
            }
        });
        if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
 

Bu koduda kutu nerde gözksün istiyorsan oraya ekle...

Kod:

<div id="wrapper">    <div id="content">    <h3 class="tab" title="first">      <div class="tabtxt">Primero</div>    </h3>    <div class="tab">      <h3 class="tabtxt" title="second">Segundo</h3>    </div>    <div class="tab">      <h3 class="tabtxt" title="third">Tercero</h3>    </div>    <div class="tab">      <h3 class="tabtxt" title="fourth">Cuarto</h3>    </div>    <div class="boxholder">        <div class="box">            <p><strong>Primer Box</strong><br />              Contenido Aqui</p>      </div>        <div class="box">            <p><strong>Segundo Box</strong><br />            Contenido Aqui</p>      </div>  <div class="box">            <p><strong>Tercer Box</strong><br />            Contenido Aqui</p>      </div>  <div class="box">            <p><strong>Cuarto Box</strong><br />            Contenido Aqui</p>      </div>    </div> </div> </div> <script type="text/javascript">
    Element.cleanWhitespace('content');
    init();
</script>

Önizleme Koyamadım K.Bakmayn

tek kusurun ön izleme olmaması ama olsun

Önizleme Varda Buraya Ekleyemedim

eyw saolasın ..

güzel paylaşım