固定式メニュー
楽天で検索
アマゾンで検索
Googleで検索
Yahoo!で検索
Gooで検索

アッシュの情報商材辛口日記

優良な情報商材・使えない詐欺商材の辛口評価

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

スクロール追尾型バナー広告・・・

まどかさんのところで紹介されていたのですが

 

ここ(FC2ブログ)でも付けられないか試してみました。

 

が、JavaScriptがうまく動いてくれず失敗に終わりました。

 

そこでJavaScriptを使わずに実現する方法はないか探したところ

 

こんなサイトを見つけました。

 

CSSフローティングメニュー

 

このサイトの情報を元に

 

テンプレートの<body>タグ内に

 

<table border="2" cellpadding="0" cellspacing="5" id="tmenu"> 
<tr><td><a>固定式メニュー</a></td></tr>
<tr><td><a href="http://www.rakuten.co.jp/" class="amenu">楽天で検索</a></td></tr>
<tr><td><a href="http://www.amazon.co.jp/" class="amenu">アマゾンで検索</a></td></tr>
<tr><td><a href="http://www.google.co.jp/" class="amenu">Googleで検索</a></td></tr>
<tr><td><a href="http://www.yahoo.co.jp/" class="amenu">Yahoo!で検索</a></td></tr>
<tr><td><a href="http://www.goo.ne.jp/" class="amenu">Gooで検索</a></td></tr>
</table>
スタイルシート内に
#tmenu {
	float: right;
	width: 178px;
	position: fixed; z-index: 99;
	margin: 110px 20px 20px 908px;
        background-color:#ffffff;
}

と記述したら右上にメニューが表示出来るようになりました。

スクロール追尾型~ではなくて固定型~になってしまいますが

使い方によっては面白いかも知れませんね。

ちなみに

position: fixed;の記述があるため

float: right;は無視されるようです。


後から普段使っているGoogle Chrome以外のブラウザ(IE、Firefox)でチェックしてみたのですが

ブラウザの違いや画面の幅によって表示がずれてしまいますね。

やはりCSSだけで実現するのは無理でしたか・・・

何とかJavaScriptで実現出来るようにしてみます。
[ 2013/02/07 20:24 ] [雑言] | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

 プロフィール

アッシュ

Author:アッシュに

メールする

 アクセスランキング
 最新コメント
 最新トラックバック


FXってそもそも何?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。