Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Меню-аккордеон на чистом CSS3 без javascript

Раздел 1

Это текст раздела 1

Раздел 2

Это текст раздела 2

Раздел 3

Это текст раздела 3

Раздел 4

Это текст раздела 4

Раздел 5

Это текст раздела 5

Исходный код этого примера:

<style type="text/css">
section {
    display: block;
}
.accordion {
    background-color: #E8EDE3;
    border: 2px solid #539127;
    width: 600px;
    padding: 10px;
    margin: 0 auto;
}
.accordion section {
    background-color: #fff;
}
.accordion h1, .accordion p {
    margin: 0;
}
.accordion p {
    padding: 5px;
}
.accordion h1 a {
    display: block;
    position: relative;
    padding: 8px;
    color: #333;
    text-decoration: none;
}
.accordion h1 a:hover {
    background: #EEEEFF;
}
.accordion h1 + div {
    height: 0;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.accordion :target h1 a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.accordion :target h1 + div {
    height: auto;
}
</style>

<div class="main">
    <div class="accordion">
        <section id="one">
            <h1><a href="#one">Раздел 1</a></h1>
            <div>
                <p>Это текст раздела 1</p>
                <p>Это текст раздела 1</p>
                <p>Это текст раздела 1</p>
                <p>Это текст раздела 1</p>
                <p>Это текст раздела 1</p>
                <p>Это текст раздела 1</p>
            </div>
        </section>
        <section id="two">
            <h1><a href="#two">Раздел 2</a></h1>
            <div>
                <p>Это текст раздела 2</p>
                <p>Это текст раздела 2</p>
                <p>Это текст раздела 2</p>
                <p>Это текст раздела 2</p>
            </div>
        </section>
        <section id="three">
            <h1><a href="#three">Раздел 3</a></h1>
            <div>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
                <p>Это текст раздела 3</p>
            </div>
        </section>
        <section id="four">
            <h1><a href="#four">Раздел 4</a></h1>
            <div>
                <p>Это текст раздела 4</p>
                <p>Это текст раздела 4</p>
                <p>Это текст раздела 4</p>
                <p>Это текст раздела 4</p>
                <p>Это текст раздела 4</p>
                <p>Это текст раздела 4</p>
            </div>
        </section>
        <section id="five">
            <h1><a href="#five">Раздел 5</a></h1>
            <div>
                <p>Это текст раздела 5</p>
                <p>Это текст раздела 5</p>
                <p>Это текст раздела 5</p>
                <p>Это текст раздела 5</p>
                <p>Это текст раздела 5</p>
            </div>
        </section>
    </div>
</div>

Автор идеи – http://www.red-team-design.com/css3-accordion.

Посмотрите другой вариант меню аккордеон.

.
Прокомментировать/Отблагодарить