簡易メニューの固定。

参考サイト:「グラフィックデザイナーのためのCSSレイアウトメモ」

リンクしているブログのRSSを追加したんです。
これで気になるあの子やこの子の更新がすぐに見えちゃう。

0_201311071611426c7.jpg
が。
プロフィール、カテゴリ、アーカイブ、コメントと。
非常に長くなってしまいRSS(下の方)に行くのが少し手間。

そこで実装したのが、右に出ているいわゆる「フローティングメニュー」と呼ばれるもの。
とはいえ、デメリットもあり。
ボタンが固定化しているため下記のように邪魔な面も。

1_20131107153119312.jpg

さておき。
JavaScriptなどで記述することも可能ですが。
今回もお手軽にHTML/CSSで。
position: fixed;」(画面の一部を固定化)を使います。
z-index」(ボックスの重なりの順序を指定)も念のため。

//HTML記述

FC2独自のタグは省略。
<div id="fixed_header">
<div class="right_menu">
<!--▼▼(ここから)欲しいリンクを記述▼▼-->
<div><a href="#top" title="上へ">TOP</a></div>
<div><a href="#bottom" title="下へ">BOTTOM</a></div>
<div><a href="#rsslink" title="RSS">LINK(RSS)</a></div>
<!--▲▲(ここまで)欲しいリンクを記述▲▲-->
</div>
</div>

//CSS

まずはベース作り。
上から150px」の「z-index: 1;」で念のために一番上に表示。

#fixed_header{
z-index: 1;
position: fixed;
width: auto;
height: auto;
right: 0;
top: 150px;
}
続いて外観。
重なった場合を考えて背景は無し、色は薄め。
.right_menu{
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: none;
box-shadow: 0 5px 5px #ccc;
line-height: 1.5;
text-align: left;
font-size:12px;
}
あとはリンクごとに囲んでおいた区切り線。
.right_menu div{
border-top: 1px dotted #000;
}

//テンプレートのHTML/プラグインの説明

送りたいリンク先を作って完成。
<a name="top"></a>
<a name="bottom"></a>
<a name="rsslink"></a>

実際の右のメニュー「RSS(LINK)」のリンク先。

3_2013110716154803f.jpg


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事