2015年08月24日(月)
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。
実際の動きは下のサンプルでご確認ください。
メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。
続いてCSSです。
#menu-wrap { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; background: rgba(0,0,0,.5); transition: .3s; } #menu { list-style-type: none; width: 960px; margin: 0px auto; padding: 0; } #menu...
author:
Webpark
http://weboook.blog22.fc2.com/
趣味でWeb制作をされているという管理人さまのブログ。いやいやご冗談を、と思わずにはいられない、CSSやJavascript関連のクオリティの高い自作tipsが多数紹介されています。
‹ PREV
いいチーム作りのために、ロフトワークが「やらない」と決めたこと(ディレクションセミナーレポート)
NEXT ›
本当に役立つ情報はインタビューにある!時間を見つけて読みたいインタビューサイト9選
関連記事
Ads
趣味でWeb制作をされているという管理人さまのブログ。いやいやご冗談を、と思わずにはいられない、CSSやJavascript関連のクオリティの高い自作tipsが多数紹介されています。Webparkの記事『jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー』についてまとめています。
この記事は特にjavascript・jQuery・Google・LINEについて書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のWebparkで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとWebparkの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。