Hazirkodlarvs.TR.GG

easy accordion menu ilk

Merhabalar Arkadaşlar Sanırım Tr.gg De İlki Yapıyoruz Bilmiyorum Ama Ben Hiç Görmedim Eassy Accordion Menü Duydunuzmu Hiç Sanırım Çoğunuzda Duymamışdır Bende dedimki Bunu Ben Düzenlerim Ve Biraz Uğraştım AÇıkcası Güzel Bir Menü Çıktı Ortaya Arkadaşlar Bu Üst Menü eklinde Önizlemesine Bakınca Anlayacaksınız ! Profesyonel Sitelerin Kullandığı Menüyü Sizlere Getirdim Arkadaşlar Şimdi Bu Kadar Anlattın Bakalım Buna Bu kadar Varmı Diyeceksiniz Evet Arkadaşlr Bence Var Ben Bu Menü İçin Yarın Tasarımda Yapmaya Çalışacam Neyse Konuyu Fazla Uzatmayalım Şimdi Sizlere Önce Önizlemesini Verelim

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>