AMP Akordeon Menü

<!DOCTYPE html>
<html amp='amp' lang='tr'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<style amp-custom='amp-custom'>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
    padding: 20px;
    font-family: 'Fira Sans Condensed', sans-serif;
    margin: 20px auto 0 auto;
    line-height: 1.8;
    font-size: 0.9rem;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: #414141;
    font-size: 1.2rem;
}
.accordion section {
    margin-bottom: 4px
}
.accordion section h4 {
    padding: 5px 15px 5px 35px;
    background-color: rgba(0, 0, 0, .02);
    border-color: rgba(0, 0, 0, .06)
}
.accordion section h4:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -2px;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(87, 130, 201, 1)
}
.accordion section>h4:after {
    content: '\f107';
    position: absolute;
    right: 15px;
    top: 0;
    display: block;
    font-family: FontAwesome;
    line-height: 44px;
    font-size: 1.2rem
}
.accordion section[expanded]>h4:after {
    content: '\f106'
}
.accordion section>div {
    padding: 10px 15px
}
amp-accordion>section[expanded]>.i-amphtml-accordion-content {
    border: 1px solid rgba(0, 0, 0, .06);
    border-top: none;
}
</style>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-accordion class="accordion i-amphtml-element i-amphtml-layout-container i-amphtml-layout" role="tablist">
    <section>
        <h4 class="i-amphtml-accordion-header" role="tab" aria-controls="_AMP_content_0" aria-expanded="false"><font><font>Başlık</font></font></h4>
        <div class="i-amphtml-accordion-content" role="tabpanel" id="_AMP_content_0"><font>Açıklama</font>
        </div>
    </section>
    <section>
        <h4 class="i-amphtml-accordion-header" role="tab" aria-controls="_AMP_content_1" aria-expanded="false"><font><font>Başlık</font></font></h4>
        <div class="i-amphtml-accordion-content" role="tabpanel" id="_AMP_content_1"><font>Açıklama</font>
        </div>
    </section>
    <section>
        <h4 class="i-amphtml-accordion-header" role="tab" aria-controls="_AMP_content_2" aria-expanded="false"><font><font>Başlık</font></font></h4>
        <div class="i-amphtml-accordion-content" role="tabpanel" id="_AMP_content_2"><font>Açıklama</font>
        </div>
    </section>
    <section>
        <h4 class="i-amphtml-accordion-header" role="tab" aria-controls="_AMP_content_3" aria-expanded="false"><font><font>Başlık</font></font></h4>
        <div class="i-amphtml-accordion-content" role="tabpanel" id="_AMP_content_3"><font>Açıklama</font>
        </div>
    </section>
    <section expanded="">
        <h4 class="i-amphtml-accordion-header" role="tab" aria-controls="_AMP_content_4" aria-expanded="true"><font><font>Başlık</font></font></h4>
        <div class="i-amphtml-accordion-content" role="tabpanel" id="_AMP_content_4"><font>Açıklama</font>
        </div>
    </section>
</amp-accordion>
</body>
</html>

Kodeks Editör

AMP Akordeon Menü

"AMP Akordeon Menü" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

AMP Akordeon Menü

"AMP Akordeon Menü" 0 Yorum yapıldı.

Yorum Gönder