[B! ナビゲーション] y-103のブックマーク

y-103 id:y-103

ナビゲーションに関するy-103のブックマーク (4)

グローバルナビゲーション | 動くWebデザインアイディア帳
書籍情報紙面だからこそできるまとめ方でコードを説明し、全体を俯瞰して調べることが出来る構成になっています。もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。購入をしてくださった方には特典がありますので是非チェックしてみてください！
y-103 2022/04/22
ナビゲーション

まとめ

web

デザイン
リンク
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。各デモは「Run Pen」をクリックすると、動作します。まずは、スクロールすると、ヒーローイメージがズームするヘッダ。 HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。
y-103 2018/04/12
CSS

JavaScript

ナビゲーション

アイデア
リンク
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
y-103 2017/03/07
jQuery

web制作

ナビゲーション

スライダー
リンク
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
y-103 2017/01/12
jquery

ナビゲーション

スクロール
リンク
1