上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 一定時間経過でスライドして切り替わる、トップメニュー。
 固定したテーブルタグを、スライドさせるだけの簡単なもの。


見本



*しばらくするとメニューが切り替わります。


簡易ヘッダスライドナビゲーション・ひな形

<div style="width:500px;overflow:hidden;position:relative;">
<table style="width:2500px;position:relative;left:0;" id="slideboxmanu">
<tr>
<td style="border:0;padding:0;">
<div style="width:490px;padding:5px;">
(内容1)
</div>
<td style="border:0;padding:0;">
<div style="width:490px;padding:5px;">
(内容2)
</div>
<td style="border:0;padding:0;">
<div style="width:490px;padding:5px;">
(内容3)
</div>
<td style="border:0;padding:0;">
<div style="width:490px;padding:5px;">
(内容4)
</div>
<td style="border:0;padding:0;">
<div style="width:490px;padding:5px;">
(内容5)
</div>
</table>
</div>

<script type="text/javascript">
<!--

var defaultSBM=0;

function slideboxstart(){
defaultSBMsub=defaultSBM;
defaultSBM=defaultSBM-500;
if (defaultSBM<(-2000)){
defaultSBM=0;defaultSBMsub=-2000;
slideboxslideR();
} else {
slideboxslideL();
}
}

function slideboxslideL(){
clearTimeout(slideSBMmaintime);
if (defaultSBMsub<(defaultSBM+2)){
defaultSBMsub=defaultSBM;
clearTimeout(slideSBMtime);
document.getElementById("slideboxmanu").style.left=defaultSBMsub+"px";
slideSBMmaintime=setTimeout("slideboxstart()",5000);
} else {
defaultSBMsub=defaultSBMsub+((defaultSBM-defaultSBMsub)*0.03);
document.getElementById("slideboxmanu").style.left=defaultSBMsub+"px";
slideSBMtime = setTimeout("slideboxslideL()",0);
}
}

function slideboxslideR(){
clearTimeout(slideSBMmaintime);
if (defaultSBMsub>(-3)){
defaultSBMsub=0;
clearTimeout(slideSBMtime);
document.getElementById("slideboxmanu").style.left=defaultSBMsub+"px";
slideSBMmaintime=setTimeout("slideboxstart()",5000);
} else {
defaultSBMsub=defaultSBMsub-(defaultSBMsub*0.03);
document.getElementById("slideboxmanu").style.left=defaultSBMsub+"px";
slideSBMtime = setTimeout("slideboxslideR()",0);
}
}

slideSBMmaintime=setTimeout("slideboxstart()",5000);

//-->
</script>



カスタマイズ

 500pxのdivボックスに、幅2500pxのテーブルを配置し、はみ出す部分を「overflow:hidden」で隠す。
 そして、スクリプト側からテーブルをポジション替えする。

 幅2500pxのテーブル内に、5コのtdボックス、tdボックスの中には幅500pxのdivボックスを入れている。

 青のー2000pxがポイントで、5個目の箱を見せるように入れるにはー2500pxは間違いで、2000pxが正しい。ポジション「left」で配置するため、右上の位置が基準になる。
このエントリーをはてなブックマークに追加
Thu.07.22.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。