勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

固定ヘッダーメニュー

      2014/07/03

やりたかった事は、

・6つぐらい異なるドメインのページがある

・似たような用途なのでそれぞれに遷移できるリンクをつけたい

・現在開いている場合はリンクさせない

・一つ前のページに戻るリンクをつけたい

というもの。

一つ一つ書いていくのはメンテや拡張の際に

面倒なことになるのでヘッダーメニューを作ってみようと思い、

調べて作ったんでメモ。

■参考サイト

http://www.css-lecture.com/log/css/047.html

■ソース

<?
extract($_REQUEST);
?>
<style>
div#header{
width: 100%;
background: #000 ;
border-bottom: 1px solid #CCC;
color: #FFF;
padding: 3px;
position: fixed; //コンテンツの固定
top:0;
left:0;
}
* html div#header{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}
div#header h3 {
width: 800px;
margin: 0 auto;
}
div#header h3 a {
color: fff;
}
</style>
<div id="header">
<h3>
<? echo ($now_url == 1) ? 'リンクA' : '<a href="http://www.aaa.com">リンク</a>';?> /
<? echo ($now_url == 2) ? 'リンクB' : '<a href="http://www.bbb.com">リンク</a>';?> /
<? echo ($now_url == 3) ? 'リンクC' : '<a href="http://www.ccc.com">リンク</a>';?> /
<? echo ($now_url == 4) ? 'リンクD' : '<a href="http://www.ddd.com">リンク</a>';?> /
<? echo ($now_url == 5) ? 'リンクE' : '<a href="http://www.eee.com">リンク</a>';?> /
<? echo ($now_url == 6) ? 'リンクF' : '<a href="http://www.fff.com">リンク</a>';?> /
<a href="javascript:history.back();">■前のページに戻る</a>
</h3>
</div>

■使い方

上記ソースが書いてあるファイルのパスをhttp://www.aaa.com/header.phpとする。

メニューをつけたいページに

<? include('http:www.aaa.com/header.php?now_url=●●'); ?>

●●はメニューをつけたいページの番号を振っておく。

now_urlをクエリで投げて、extractで受け取って

現在のページをリンクさせないようにしている。

もうちょっとスマートなやり方もありそうだけど、

とりあえずはこれ以上思いつかなかった。

 - CSS

  関連記事

images
CSSで一つの要素に対して複数の背景色を指定する方法

divの要素に対して複数の背景色をつけたかった。background-color ...

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

■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

images
ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

jquery_logo
ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

images
可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

jquery_logo
jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

jquery_logo
jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

images
ガラケー(特にdocomo)でのCSS

PCサイトだとIEでつまずくことが多いけど、 ガラケーはdocomoが難儀やよ、 ...

images
CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...

images
CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...