当サイトにナビゲーションバー?を設置しました。


2013年4月4日 / 投稿者:

 当サイト( http://aozorahoumu.net/ )に、自前の「ナビゲーションバー」(Navigation Bar)を設置してみました。

 と、書きつつ、本格的なナビゲーションバーではありませんで(だから?マークが付いているのですが)、「トップページへ移動」「ページの先頭に戻る」という作業を簡単に可能とするためのツールです。

 例えばFacebookとか、Googleの各サービスとかには、画面の左上に「Facebook」「Google」と書かれたロゴマークの部分がありますよね。
 同ロゴは、ページを読み進めて下にスクロールしていっても、画面上の同じ場所にいつでも固定表示されています。
 そしてその同ロゴをクリックすると、各サービスのトップページに戻ることができる(またはページが更新される)……という仕組みになっています。
 これに憧れ?て、今回似たような仕組みを実装してみた次第です。

 大抵のサイトでは、画面の最上部にメニューが表示されていますが、ページをスクロールすると見えなくなってしまうのがほとんどです。
 一定程度、閲覧中のページが下にスクロールされた状態で、「同じサイトの、別のコーナーに行きたいなぁ」と思っても、わざわざ最上部までスクロールを戻したうえで、メニューに辿りつかなければいけないことになってしまいます。

 そういう煩わしさを解消してくれるのが、今回設置したナビゲーションバーです。
 画面の最も下に表示されているはずですので、早速お試し下さい。

 機能性重視なので、あまり見た目がよくないかもしれませんが、使い勝手はなかなか、なんではないかと自負しております。

 ちなみに、htmlおよびCSSのコードは次のとおり(Wordpress用)。

<div class="under_menu">
<div>
<ul>
	<li><a title="Home" href="http://aozorahoumu.net/"> <img src="http://aozorahoumu.net/image/ahn_mini3.jpg" height="20" /></a></li>
	<li><a title="Home" href="http://aozorahoumu.net/">トップページ</a></li>
	<li><a title="Top" href="#">↑ページの先頭へ</a></li>
	<li><a title="Bottom" href="#credits">ページの末尾へ↓</a></li>
</ul>
</div>
</div>

.under_menu {
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: #464646;
	width: 100%;
	z-index: 10000;
	padding: 0.5em 1em;	
}
.under_menu div {
	max-width: 80%;
	margin: 0 auto; 	
}
.under_menu ul {
	list-style: none;
	margin: 0; 	
	padding: 0; 	
}
.under_menu li {
	float: left;
	margin: 0 1em; 	
	padding: 0;
}
.under_menu  a {
	color: #87CEFA;
}
.under_menu  a:hover{
	background-color:#ffffff;
	color: #000000;
}

 それぞれの環境に応じて、不要な部分などもあるかと思いますが、適当に改変してお使いください。

 また、今回、参考にさせていただいた解説ページを掲載しておきます。

なお、実は、上記のシンプルなコードだけだと、「IE6よりも以前のIEブラウザには対応しない」そうなのですが……。

 ま、構わんでしょう(^_^;)





 

RSS 新着記事一覧

© 2019 あおぞら法務ネット All rights reserved - Mobile View - Powered by WordPress and Wallow - Have fun!