プラグインを使わずにCSSとjQuery数行でできるドロワーナビ | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今やレスポンシブウェブデザインや、スマホ制作には欠かせない、ドロワーナビ。 jQueryのプラグインも豊富に存在しますが、DEMOのソースと環境を揃えてあげないといけなかったり、ちょこちょこ修正が必要だったりと、意外と面倒です。 実は特に難しい事はせずに、数行のjQueryコードとCSSで実装可能なのです。 今回はプラグインを使わずに作るドロワーナビをご紹介いたします。 Table of contentsコンテンツとナビゲーションを用意開いている状態を作成するjQueryで制御するコンテンツとナビゲーションを用意まずはコンテンツとナビゲーションを用意します。 固定ヘッダーとコンテンツ、そしてリスト型のナビゲーションを用意し、#drawernavとします。 DEMO.コンテンツとナビゲーションを用意 <div id="page"> <!-- コンテンツ --
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
