勉強したことのメモ

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

  関連記事

ページ内リンク(アンカーリンク)がずれる場合の対処法

ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...

formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...

特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...

Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...

CSSでセンターリング

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

LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

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

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

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

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

スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

CSSのopacity

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