[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション

スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される際には各アイテムが異なるタイミングでアニメーションします。 HTML コンテンツエリアはsection要素で、そこにナビゲーション表示のトグルとなるチェックボックスのラベルを配置します。ナビゲーションは、普通にリスト要素で実装します。 <div id="wrapper"> <div class="mobile"> <!-- トグルとなるチェックボックス --> <input type="checkbox" id="tm" /> <!-- ナビゲーション --> <ul class="sidenav"> <

[kijtra]

いいね。縦スクロールに対応する必要があるけど・・・

[nors]

http://thecodeplayer.com/walkthrough/off-canvas-menu-animated-links

[hanagejet]

横からスライド。スマホのメニューとかに使えそう。

[lazex]

JSなしでクリック時にスライド。クリック判定はhtmlのlabel forとcheckboxを使う。あとはcssの:checkedとtransitionを組み合わせる。タイミングずらすのはtransition-delay

[kana321]

スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。

[z1a2nh]

びろろん

[Sips]

ナビ

[hedeyoshi]

かっこいい。使おう。

[kasumani]

かっこいいアイデアが盛り込まれた横からスライドするナビゲーション スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 Tags: from