プルダウンメニュー

 

メニューはポップアップとして PageMill はサポートしていますが、CGIを使う <FORM> としてのもので、CGIをサポートしていないサーバーでは無用の長物です。プルダウンして選択してから、改めて送信ボタンを押さなければなりません。ここでは、どんなサーバーでも使えて、選択すれば即ジャンプするものを考えてみましょう。

 

 プルダウンメニューを作る

ブルダウンメニューは、JaveScript の <OPTION> タグを使い、<FORM> をも使いますが、CGI を使わないので、どんなサーバーでも使えます。PageMillでは、<FORM METHOD="POST"></FORM> のセットをソフトが組んでくれますが、もし <BODY> から </BODY> の間に <FORM> と </FORM> が無かったら、入れる必要があります。METHOD="POST" はお手本にしたサイトには無かったんですが、ソースモードで <FORM> と入力して、編集モードにすると、PageMill が自動で入れていました。

PageMill には妙な癖があって、タグの前後に <P></P> のセットを挿入してしまいます。他のソフトでも似たことが起こるそうですね?<P></P> に括られたからからと言って、特別な支障はありませんが、気になるなら、表に入れれば何とかなります。ここでは次の例でもそうしています。紫色で書いた部分が表に関するものですから、<P></P> のセットが気にならないか、大丈夫なソフトを使っている場合は、紫色の部分を削除してください。

inMenu は、それらしくつけた適当な名前です。mylinks としても構いませんし、mymenuでもOKです。<OPTION> の数は適宜増減できます。このボタンはリンクを同じ窓で表示しますから、ページの要素は受け継がれ、改めて指定の必要はありません。同一のサイト内で使うのに適しているでしょうね?

 

<FORM >
<SCRIPT LANGUAGE="JavaScript">
<!--
function inMenu(sel){
mlink=sel.options[sel.selectedIndex].value;
if(mlink!="-"){ location.href=mlink;
}
}
//-->
</FONT></SCRIPT><SELECT onChange="inMenu(this)">
<OPTION VALUE="-" SELECTED>
フレーム無し専用
<OPTION VALUE="
../main.html">目次
<OPTION VALUE="
../link/link.html">リンク
<OPTION VALUE="
../image/image.html">イメージ
<OPTION VALUE="
../background/background.html">背景
<OPTION VALUE="
../window/window.html">ウィンドウ
<OPTION VALUE="
../table/table.html">表の利用
<OPTION VALUE="
../button/button.html">ボタン
<OPTION VALUE="
../menu/menu.html">プルダウンメニュー
<OPTION VALUE="
../message/message.html">メッセージ
<OPTION VALUE="
../tricks/tricks.html">小ワザ集
<OPTION VALUE="
../robot/robot.html">ロボット対策
</SELECT>
</FORM>

 

 プルダウンメニューから別窓で表示させる

ブルダウンメニューからのリンク先を新しいウィンドウ、つまり別窓で表示させるには、少し変えます。"toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes" は、それぞれツールバー、メニューバー、アドレスなどを新しいウィンドウでも表示するよう指示しています。不要なら no としてください。名前は exMenu としておきました。この場合は表に関するものを削除しましたが、前の例と同じです。

 

<FORM METHOD="POST">
<SCRIPT LANGUAGE="JavaScript">
<!--
function
exMenu(Sel){
mlink=Sel.options[Sel.selectedIndex].value;
if(mlink!="-"){
window.open(mlink,"","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes");
}
}
//-->
</SCRIPT>
<SELECT onChange="
exMenu(this)">
<OPTION VALUE="-" SELECTED>
フレーム有り専用
<OPTION VALUE="
../entrada/index.html">トップページ
<OPTION VALUE="
../link/index.html">リンク
<OPTION VALUE="
../image/index.html">イメージ
<OPTION VALUE="
../background/index.html">背景
<OPTION VALUE="
../window/index.html">ウィンドウ
<OPTION VALUE="
../table/index.html">表の利用
<OPTION VALUE="
../button/index.html">ボタン
<OPTION VALUE="
../menu/index.html">プルダウンメニュー
<OPTION VALUE="
../message/index.html">メッセージ
<OPTION VALUE="
../tricks/index.html">小ワザ集
<OPTION VALUE="
../robot/index.html">ロボット対策
</SELECT>
</FORM>

 

 プルダウンメニューの宿題

ブルダウンメニューをフレームで使うと、フレームセットの中にフレームセットができたりしてやりにくいですね?そこで何か良い方法はないものかと考え中です。考えたって分かりっこありませんから、サーフしてアイディアを頂戴しようというわけです。誰か教えて♪

答えになるかどうか分かりませんが、「フローティングメニュー」というものを見つけました。かなり魅力的なものですが、いかがでしょうか?ただし全てのページにセットするとなると、私のようにやたらページ数が多い場合は、やっぱり大仕事でしょうね?

サンプル

フレーム無しの目次

直前のページ

フレームを回復

 
SEO [PR] !uO z[y[WJ Cu