- Easy Accordion

Easy Accordion

Buyrun Önizleme Burdan !

Şimdi Gelelim Kodlara

Css Kodları

<style type="text/css">

          html{font-size:62.5%}

          body{font-size:1.2em;color:#294f88}

          .sample{margin:30px;border:1px solid #92cdec;background:#d7e7ff;padding:30px}

          h1{margin:0 0 20px 0;padding:0;font-size:2em;}

          h2{margin:40px 0 20px 0;padding:0;font-size:1.6em;}

          .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}

          p{font-size:1.2em;line-height:170%;margin-bottom:20px}

                    

         

        /* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */

        

        .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}

        .easy-accordion dt,.easy-accordion dd{margin:0;padding:0}

        .easy-accordion dt,.easy-accordion dd{position:absolute}

        .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}

        .easy-accordion dd{z-index:1;opacity:0;overflow:hidden}

        .easy-accordion dd.active{opacity:1;}

        .easy-accordion dd.no-more-active{z-index:2;opacity:1}

        .easy-accordion dd.active{z-index:3}

        .easy-accordion dd.plus{z-index:4}

        .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}

         

         

        /* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */

        

        dd p{line-height:120%}

        

        #accordion-1{width:700px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}

        #accordion-1 dl{width:700px;height:245px}    

        #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(https://img.webme.com/pic/h/hazirkodlarvs/akormens1.jpg) 0 0 no-repeat;color:#26526c}

        #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(https://img.webme.com/pic/h/hazirkodlarvs/akormens2.jpg) 0 0 no-repeat}

        #accordion-1 dt.hover{color:#68889b;}

        #accordion-1 dt.active.hover{color:#fff}

        #accordion-1 dd{padding:25px;background:url(https://img.webme.com/pic/h/hazirkodlarvs/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}

        #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}

        #accordion-1 .active .slide-number{color:#fff;}

        #accordion-1 a{color:#68889b}

        #accordion-1 dd img{float:right;margin:0 0 0 30px;}

        #accordion-1 h2{font-size:2.5em;margin-top:10px}

        #accordion-1 .more{padding-top:10px;display:block}

            

        



      </style>

Tasarım Üstü Kodları Yada Menüyü Nereye Ekleyecekseniz Oraya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

      <script type="text/javascript" src="http://hazirkodlarvsdeneme.clanteam.com/akarmen/jquery.easyAccordion.js"></script>

      <script type="text/javascript" src="http://hazirkodlarvsdeneme.clanteam.com/akarmen/utility.js"></script>

<div id="accordion-1">



            <dl>

                <dt>HazirkodlarVs</dt>

                <dd><h2>Başlık</h2><p><img src="https://img.webme.com/pic/h/hazirkodlarvs/img5.png" alt="Alt text to go here" />Buraya Yaz Bişiler İşde xD <br />

                  <a href="#" class="more">Devamı</a></p></dd>

                <dt>HazirkodlarVs</dt>

                <dd><h2>Başlık</h2><p>Burayada Bişiler Yaz Ama Menü Başlığın İle İlgili Bişey Olsun<br /><a href="#" class="more">Devamı</a></p></dd>



                <dt>HazırkodlarVs</dt>

                <dd><h2>Başlık Yaz</h2><p><img src="https://img.webme.com/pic/h/hazirkodlarvs/img5.png" alt="Alt text to go here" />Burayada Bişiler Yaz Ama Menü Başlığın İle İlgili Bişey Olsun.<br />

                  <a href="#" class="more">Devamı</a></p></dd>

                <dt>HazırkodlarVs</dt>

                <dd><h2>Another slide to go here</h2><p><img src="https://img.webme.com/pic/h/hazirkodlarvs/img5.png" alt="Alt text to go here" />Burayada Bişiler Yaz Ama Menü Başlığın İle İlgili Bişey Olsun<br />

                  <a href="#" class="more">Devamı</a></p></dd>

                <dt>HazırkodlarVs</dt>



                <dd><h2>HazırkodlarVs</h2><p><img src="https://img.webme.com/pic/h/hazirkodlarvs/img5.png" alt="Alt text to go here" />Burayada Bişiler Yaz Ama Menü Başlığın İle İlgili Bişey Olsun.<br />

                  <a href="#" class="more">Devamı</a></p></dd>

                <dt>Yaz Bişiler</dt>

                <dd><h2>Hazırkodlarvs</h2><p><img src="https://img.webme.com/pic/h/hazirkodlarvs/img5.png" alt="Alt text to go here" />Burayada Bişiler Yaz Ama Menü Başlığın İle İlgili Bişey Olsun<br />

                  <a href="#" class="more">Devamı</a></p></dd>

            </dl>

        </div>