勉強したことのメモ

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のopacity

opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...

images
スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

images
フォームCSS

body { font-family : 'メイリオ',Meiryo,'MS P ...

flash_player_11_icon_rgb
Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

images
CSSでセンターリング

<center></center>でセンターリングが出来 ...

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

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

images
要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

images
CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

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

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

images
CSSでスタイルの優先

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