勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

上部に固定されたヘッダーメニューの作成

  CSS

■やりたい事

ページスクロールしても上部に固定されたヘッダメニューの作る

 
■方法

メニューの要素に、下記CSSを指定。

#header {
position: fixed !important;
position: absolute;
top: 0; 
left: 0;
width: 100%;
background-color: #000;
color: #fff;
height: 100px;
}

 

■サンプル

http://sample.taitan916.info/header/

 

■その他
ヘッダの下にある要素に関しては100px分余白とっとかないと表示が被ってしまうので注意する。

 - CSS

  関連記事

CSSで1つの要素に複数classを設定して画像を入れ替える方法

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法

可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...

LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...