タグ別アーカイブ: メニュー

新しいウィンドウをJavascriptで開く方法

ツールバーのメニューやスクロールバーを消したりウィンドウサイズを固定したりできます。

■オプション

directions
ディレクトリバーの表示/非表示(yes/noまたは1/0)
location
ロケーションバーの表示/非表示(yes/noまたは1/0)
menubar
メニューバーの表示/非表示(yes/noまたは1/0)
scrollbars
スクロールバーの表示/非表示(yes/noまたは1/0)
status
ステータスバーの表示/非表示(yes/noまたは1/0)
toolbar
ツールバーの表示/非表示(yes/noまたは1/0)
resizable
ウィンドウサイズ変更の可/否(yes/noまたは1/0)
width
ウィンドウの幅(ピクセル値)
height
ウィンドウの高さ(ピクセル値)
続きを読む

smartRollover


09  December  2011

スマートロールオーバーのご紹介。 同じフォルダに画像を二つ用意します。 1つはマウスホバーの画像{XXX_on.jpg}と通常時の{XXX_off.jpg} 後は下記をJSとしてヘッドなり外部JSとしてと見込ませればオンオフの切り替えが出来ます。


[php]
#globalnavi {
margin: 0;
padding: 0;
list-style-type: none; /* リストマークの削除 */
width: 172px;
padding: 145px 0px 0px 0px;
}

#globalnavi li {
width: 172px;
height: 32px;
margin: 0;
padding: 0;
display: inline;
}

#globalnavi a {
text-indent: -9999px; /* テキストを隠す */
text-decoration: none;
display: block;
width: 172px;
height: 32px; /* リンク領域を広げる */
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}

#menu1 a { background-position: 0 0; } /* 表示画像の位置を指定 */
#menu2 a { background-position: 0 -29px; }
#menu3 a { background-position: 0 -58px; }
#menu4 a { background-position: 0 -86px; }
#menu5 a { background-position: 0 -116px; }
#menu6 a { background-position: 0 -145px; }
#menu7 a { background-position: 0 -174px; }
#menu8 a { background-position: 0 -200px; }
#menu9 a { background-position: 0 -230px; }
#menu10 a { background-position: 0 -258px; }
#menu11 a { background-position: 0 -288px; }
#menu12 a { background-position: 0 -317px; }
#menu13 a { background-position: 0 -348px; }

#globalnavi a:hover {
text-decoration: none;
background-image: url(images/menu.gif);
background-repeat: no-repeat;
}

/* 入れ替え画像の位置を指定 */
#menu1 a:hover { background-position: -172px 0; }
#menu2 a:hover { background-position: -172px -29px; }
#menu3 a:hover { background-position: -172px -54px; }
#menu4 a:hover{ background-position: -172px -83px; }
#menu5 a:hover{ background-position: -172px -114px; }
#menu6 a:hover{ background-position: -172px -145px; }
#menu7 a:hover{ background-position: -172px -174px; }
#menu8 a:hover{ background-position: -172px -200px; }
#menu9 a:hover{ background-position: -172px -230px; }
#menu10 a:hover{ background-position: -172px -259px; }
#menu11 a:hover{ background-position: -172px -288px; }
#menu12 a:hover{ background-position: -172px -317px; }
#menu13 a:hover{ background-position: -172px -348px; }

[/php]


ヘッダーにカテゴリを表示します。
CSSハックでドロップダウンメニューにも対応。
一応管理画面からだけで設定可能なシンプル版です。 続きを読む