jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 投稿日2015年10月28日 更新日2015年10月28日 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a
明日から使える！ユーザビリティに優れたリッチなグローバルメニューの作り方 | 株式会社WEB企画
ヘッダー固定のグローバルメニューを作る機会がありました。 グローバルメニューに大きめのアイコンを付けるようなデザインで高さを大きくしすぎてしまうと、ノートパソコン等の縦幅が小さい画面で見た時、表示できるコンテンツの量が狭くなってしまう問題があります。 そこで、この問題を解消するため、スクロールするとグローバルメニューが縮む仕掛けを実装してみました。 そうすることでファーストビューはデザイン性のあるリッチなグローバルメニューを演出しつつ、スクロールするとコンテンツを邪魔しないシンプルなグローバルメニューに変わります。 スマートフォンは解像度がPCに比べ小さいので、スマホサイトでも活躍しそうです。 それでは、実装の仕方を順を追って説明していきます。 スクロールすると高さが縮み、追従するグローバルメニューの実装方法 STEP.1 まずは、グローバルメニューをコーディング PSDなどでデザインした
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
