Яваскрипт не нужен. Почти
Jan. 10th, 2012 10:45 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
shoorickРазбираюсь с модными HTML5 и CSS3, а точнее, с бесскриптовой анимацией, с помощью
Действующий пример лежит на http://shoorick.ru/lj/net/accordion-vertical.html, код — на гитхабе и прямо тут:
Следующая задача — повернуть получившийся баян на 90° — с ней я почти придумал, как справиться. Дальшейшие — смена картинок и прокрутка содержимого блока без участия яваскрипта и посетителя сайта — пока туманны. Но всё равно придумаю. Или нагуглю. Хотя в девизе моей альма-матери другой порядок действий: Нагуглю или придумаю. Aut viam inveniam, aut faciam.
transition. Попробовал сделать вертикальный (обычный) аккордеон — почти получилось. Ни один яваскрипт не пострадал. Работает под линуксом в Firefox 10, Opera 11.60 и Chromium 14. Под виндой в IE 8 — не работает. В остальных браузерах и ОС пока не тестировал. Modernizr пока тоже не прикручивал.Действующий пример лежит на http://shoorick.ru/lj/net/accordion-vertical.html, код — на гитхабе и прямо тут:
<!DOCTYPE html><html> <head> <title>CSS3 Transition - Accordion sample</title> <!-- 2012-01-10 - 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: 111%; }
div { background-color: #def; -moz-transition: background-color 1s; -ms-transition: background-color 1s; -o-transition: background-color 1s; -webkit-transition: background-color 1s; transition: background-color 1s; margin: 0; padding: 1em; border-top: 1px solid white; }
div:target { background-color: #ff0; }
div p { height: 0; margin: 0; color: #678; overflow: hidden; -moz-transition: height 1s, color 1s; -ms-transition: height 1s, color 1s; -o-transition: height 1s, color 1s; -webkit-transition: height 1s, color 1s; transition: height 1s, color 1s;
}
div:target p { height: 100px; color: maroon; }
</style> </head> <body> <h1>CSS3 Transition - Accordion sample</h1>
<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> </body></html>Следующая задача — повернуть получившийся баян на 90° — с ней я почти придумал, как справиться. Дальшейшие — смена картинок и прокрутка содержимого блока без участия яваскрипта и посетителя сайта — пока туманны. Но всё равно придумаю. Или нагуглю. Хотя в девизе моей альма-матери другой порядок действий: Нагуглю или придумаю. Aut viam inveniam, aut faciam.
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2012-01-11 03:20 am (UTC)только пока ИЕ этого делать не умеет, жалко тратить время
Re: ИЕ
Date: 2012-01-11 05:30 am (UTC)Вчера нагуглил,
что есть библиотека, которая подобное поведение и реализует.
no subject
Date: 2012-01-12 03:01 pm (UTC)no subject
Date: 2012-01-12 07:21 pm (UTC)