shoorick

Продолжаю ковырять transition — повернул баян на 90°.

Код с действующим примером выложен на http://jsfiddle.net/shoorick/bp7QM/ (там сразу видно всё: и код с подсветкой синтаксиса, и результат), кроме того, как и в прошлый раз, пример — на http://shoorick.ru/lj/net/accordion-horizontal.html, код — на гитхабе и прямо тут:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Transition - Accordion sample</title>
        <!-- 2012-01-12 - Alexander Sapozhnikov - http://shoorick.ru/ -->
        <style>
            body {
                font-family: "Liberation Sans",sans-serif;
                color: #000;
                background-color: #fff;
            }

            h2 {
                margin: 0;
                padding: 0;
                font-size: 100%;
            }

            h2 a {
                color: #030;
                background-color: #cec;
                display: block;
                text-align: center;
                width: 120px;
                height: 20px;
                position: absolute;
                text-decoration: none;
                -webkit-transform: translate(-50px,50px) rotate(-90deg);
                   -moz-transform: translate(-50px,50px) rotate(-90deg);
                    -ms-transform: translate(-50px,50px) rotate(-90deg);
                     -o-transform: translate(-50px,50px) rotate(-90deg);
                        transform: translate(-50px,50px) rotate(-90deg);
            }

            div:target h2 a {
                color: #efd;
                background-color: #090;
            }

            h2 a:hover {
                color: #fff;
                background-color: #060;
            }

            div {
                background-color: #dfd;
                -webkit-transition: background-color 1s, width 1s;
                   -moz-transition: background-color 1s, width 1s;
                    -ms-transition: background-color 1s, width 1s;
                     -o-transition: background-color 1s, width 1s;
                        transition: background-color 1s, width 1s;
                margin: 0;
                padding: 0;
                border-top: 1px solid white;
                width: 20px;
                height: 120px;
                overflow: hidden;
                float: left;
            }

            div:target {
                background-color: #9f3;
                width: 400px;
            }

            div p {
                margin: 0;
                width: 360px;
                color: #678;
                -webkit-transition: color 1s;
                   -moz-transition: color 1s;
                    -ms-transition: color 1s;
                     -o-transition: color 1s;
                        transition: color 1s;
                padding: 10px 5px 10px 30px;

            }

            div:target p {
                color: #353;
            }

        </style>
    </head>
    <body>
        <h1>CSS3 Transition - Accordion sample</h1>

        <section>
        <div id="ave">
            <h2><a href="#ave">Ave verum</a></h2>
            <p>Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine,
            cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.</p>
        </div>

        <div id="gaudeamus">
            <h2><a href="#gaudeamus">Gaudeamus</a></h2>
            <p>Gaudeamus igitur, Juvenes dum sumus!
            Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!</p>
        </div>

        <div id="odi">
            <h2><a href="#odi">Odi et amo</a></h2>
            <p>Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.</p>
        </div>
        </section>
    </body>
</html>

Flat | Top-Level Comments Only

From:

kitt-vl.livejournal.com

Отлично! На мой придирчивый вкус не хватает только того, чтобы при повторном нажатии на открытую вкладку, она закрывалась.
Перепостил к себе в сообщество.
ЗЫ. вот еще у буржуев (http://www.hongkiat.com/blog/css-content-accordion/)

shoorick.livejournal.com

Ага, не хватает. Иногда. Но как реализовать — пока не думал.

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Re: Яваскрипт не нужен. Почти

Re: Яваскрипт не нужен. Почти

no subject

no subject

Profile

December 2016

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags