WEB系キャンパス

(K)positionによる配置指定でヘッダーのナビゲーションメニューを固定表示(CSS覚え書き)

nav_kotei_top

こんにちは、週末雨が続く中、楽しみは土曜深夜の打ちっぱなしの＠Kc_fujiです。

リキッドレイアウトに続いて、次の覚え書きはヘッダーのナビゲーションを固定するレイアウトです。

一昔前にブログサイトで、よく見た気がします。
（今はサイドバーを固定してる人が多いかな・・・）

縦スクロールの長いコンテンツの多いサイトは、「PageTOP」のJavascriptよりも上部に常にデカデカと見えてる分、ユーザビリティが高い気がしますが、逆に目障りだと取るユーザーもおられるかなと・・・
まぁ、やった事ないし、覚えといて損はないので、挑戦してみます。

【1】普通にHTMLマークアップ

HTMLのマークアップは普通に「ヘッダー(nav)」「サイドバー(sidebar)」「コンテンツ(contents)」「フッター(footer)」で記述します。※固定したい「nav」は一番上に記述

ソースを表示
印刷SyntaxHighlighterについて
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>ヘッダー固定サンプル</title>
6</head>
7<body>
8<div id="nav">
9    <ul>
10    <li>ナビ1</li>
11    <li>ナビ2</li>
12    <li>ナビ3</li>
13    <li>ナビ4</li>
14    <li>ナビ5</li>
15    </ul>
16</div><!-- /#nav -->
17 
18    <div id="wrapper">
19         
20        <div id="sidebar">
21            <ul>
22            <li>メニュー項目1</li>
23            <li>メニュー項目2</li>
24            <li>メニュー項目3</li>
25            <li>メニュー項目4</li>
26            <li>メニュー項目5</li>
27            <li>メニュー項目6</li>
28            <li>メニュー項目7</li>
29            <li>メニュー項目8</li>
30            <li>メニュー項目9</li>
31            <li>メニュー項目10</li>
32            </ul>
33        </div>
34     
35        <div id="contents">
36        <p>本文テキスト本文テキスト</p>
37        </div><!-- /#contents -->
38 
39    </div><!-- /#wrapper -->
40 
41<div id="footer">
42    <p>フッター</p>
43     
44</div><!-- /#footer -->
45 
46     
47     
48</body>
49</html>

【2】普通にCSSでレイアウト

違いがわかりやすいように、普通のレイアウトで組んでみます。
サンプル（途中）

ソースを表示
印刷SyntaxHighlighterについて
1body{
2    text-align: center;
3    margin: 0;
4    padding:0;
5    }
6 
7#nav{
8    background: #7e1700;
9    left:0;
10    top:0;
11    width:100%;
12    height: 60px;
13    text-align: center;
14}
15     
16#nav ul{
17    margin:0;
18    padding: 0;
19    list-style: none;
20}
21 
22#nav ul li{
23    display: inline;
24    line-height: 60px;
25    color:#fff;
26    margin:0 20px;
27}
28 
29#wrapper{
30    text-align: left;
31    margin: 10px auto;
32    width:950px;
33}
34     
35 
36     
37#footer{
38    clear: both;
39    background: #c3655c;
40    height:150px;
41    width: 100%;
42    }
43 
44#sidebar{
45    width: 200px;
46    background: #d57c73;
47    float: right;
48    margin-bottom: 20px;
49}
50     
51#contents{
52    background: #edcdcc;
53    margin:0 230px 30px 0;
54    height:800px;
55}
56 
57#contents p{
58    margin:0;
59    padding:10px;
60    line-height: 200%;
61}

【3】position: fixed;で固定させる

まず。「nav」にposition:fixed;を追記して固定させる。
「nav」が固定された分「Wrapper」が一番上に来てしまい、「nav」とかぶっちゃったので、「nav」の高さ＋スキマ分を考えてpaddingを指定。

ソースを表示
印刷SyntaxHighlighterについて
1#nav{
2    background: #7e1700;
3    left:0;
4    top:0;
5    width:100%;
6    height: 60px;
7    text-align: center;
8    position: fixed;　←追記
9}
10 
11 
12#wrapper{
13    text-align: left;
14    margin: 0 auto;
15    width:950px;
16    padding:80px 0 0 0;　←追記
17}

これで、出来たのが以下のサンプル↓
サンプル

まとめ

今回のCSSプロパティだけでは、IE6ではうまく表示できないようです（※未確認）postion:fixが効くように追記項目があるみたいですが、2013年6月の国内IEシェア率1.7%の低い数字と、当ブログのサイト属性から考えて、切り捨てさせていただきました。IE6さん(｡-人-｡) ｺﾞﾒｰﾝ。
今回はただ単に固定しただけですが、最初ナビゲーションは非表示で、スクロールすると現れる表現もありますが、今はそっちのほうがいいかもしれませんね。しかし、10年以上前にダイヤルアップで見てたあの頃との表現の多さには毎度驚かされる思いで、勉強させていただいている＠Kc_fujiでした。お疲れ様ですm(__)m

こちらの記事もあわせてどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です