Saf HTML / CSS3 Akordeon Menüleri

   Blogger sitenizde çok amaçlı olarak kullanabilen ve uzun yazılarda en çok bu tür özellikler ve eklentiler arayıp bulamadığımız zamanlar oluyordur eminim.Sitemizde daha önce de yayınlamış olduğumuz farklı kullanışlı ve gelişmiş WordPress tabanlı menüler olup Blogger için kodladığım Blogger Menülerine de göz atabilirsiniz.

   Bu akordeon menüleri sitemize nasıl ekleyebiliriz buna göz atalım;

• Kumanda Paneli> Şablon > HTML Düzenle yolunu izliyoruz.
• Daha sonra CTRL+F tuşları ile </b:skin> kodunu araıyoruz
• Bulduğumuz </b:skin> kodunun hemen üst kısmına aşağıdaki CSS3 kodlarını ekleyip şablonu kaydedin.

/ * Tüm akordiyon tipleri * / için Paylaşılan 
.accordion { 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0 auto; 
    font-size: 14px; 
    border: 1px solid # 542437; 
    border-radius: 10px; 
    width: 600px; 
    padding: 10px; 
    background: #fff; 
} 
.accordion ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;     
} 
.accordion li { 
    margin: 0; 
    padding: 0; 
} 
.accordion [type = radio ], .accordion [type = checkbox] { 
    display: none; 
} 
.accordion etiketi { 
    display: block; 
    font-size: 16px; 
    line-height: 16px; 
    background: # D95B43; 
    border: 1px solid # 542437; 
    color: # 542.437; 
    text-shadow: 1px 1px 1px RGBA (255,255,255,0.3) 
    font-weight: 700; 
    cursor: pointer; 
    text-transform: büyük harf; 
    -webkit-geçiş: Tüm .2s kolaylığı Çıkış; 
    -moz-geçiş: hepsi .2s-out kolaylığı; 
} 
.accordion ul li etiketi: hover, .accordion [type = radio]: işaretli ~ etiket .accordion [type = checkbox]: işaretli ~ label { 
    background: # C02942; 
    color: #fff; 
    text -Gölge: 1px 1px 1px RGBA (0,0,0,0.5) 
} 
.accordion .content { 
    padding: 0 10px; 
    taşma: gizli; 
    border: 1px solid #fff; / * O güzel * / kaybolur, böylece sınır arka plan maç Make 
    -webkit-geçişi: bütün .5s-kolaylığı çıkışı; 
    -moz-geçiş: Tüm .5s-out kolaylığı; 
} 
.accordion p { 
    color: # 333; 
    margin : 0 0 10px; 
} 
.accordion h3 { 
    color: # 542437; 
    padding: 0; 
    margin: 10px 0; 
} 


/ * * Dikey / 
.vertical ul li { 
    taşma: gizli; 
    margin: 0 0 1px; 
} 
.vertical ul li Etiket { 
    padding: 10px; 
} 
.vertical [type = radio]: işaretli ~ etiket .vertical [type = checkbox]: işaretli ~ Etiket { 
    border-bottom: 0; 
} 
.vertical ul li etiketi: hover { 
    border: 1px solid # 542437; / * Biz sınır hover * / üzerinde kaybolur istemiyorum 
} 
.vertical ul li {.content 
    ; 0px: yükseklik 
    border-üst: 0; 
} 
.vertical [type = radio]: işaretli ~ etiket ~ .content. Dikey [type = checkbox]: işaretli ~ etiket ~ .content { 
    height: 300px; 
    border: # 542437 1px solid; 
}

HTML Kodu

<Div class = "akordeon dikey"> 
    <ul> 
        <li> 
            <işaretli input type = "radio" id = "radio-1" name = "radio-akordeon" = / "işaretli"> 
            = için <label "radyo 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-2" name = "radio-akordeon" /> 
            < etiket = için "radyo-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-3" name = "radio-akordeon" /> 
            < etiket = için "radyo-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-4" name = "radio-akordeon" /> 
            < etiket = için "radyo-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

2.ci seçenek için yukarıda ki işlemleri tekrar yapın.
HTML Kodu

<Div class = "akordeon yatay"> 
    <ul> 
        <li> 
            <input type = "radio" id = "vert-1" name = işaretli "vert-akordeon" = / "işaretli"> 
            = "vert- için <etiket 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-2" name = "vert-akordeon" /> 
            < etiket = için "vert-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-3" name = "vert-akordeon" /> 
            < etiket = için "vert-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-4" name = "vert-akordeon" /> 
            < etiket = için "vert-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

<Div class = "akordeon yatay"> 
    <ul> 
        <li> 
            <input type = "radio" id = "vert-1" name = işaretli "vert-akordeon" = / "işaretli"> 
            = "vert- için <etiket 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-2" name = "vert-akordeon" /> 
            < etiket = için "vert-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-3" name = "vert-akordeon" /> 
            < etiket = için "vert-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-4" name = "vert-akordeon" /> 
            < etiket = için "vert-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!