MENU ▼   このアーカイブのスクリプトバージョンは「 」です

設置説明書
FREEWARE ()

基本的な設置方法

さてそれでは、実際にコンポーネントを組み込んで、ホップアップ式メニューを作成してみましょう。

<Html><Title>デモ</Title>
<Head>

  <Script Language = "Javascript" src="m_script.js"></Script>
</Head>

<Body OnLoad="startwindow()">

<Center>
<Table border=01 width=100 height=1000>
  <Tr><Td>ダミー</Td></Tr>
</Table>

</Center>
  <Layer visibility="hidden">
    <Div id="MoveDiv">
      移動メニュー 選択肢1<Br>
      移動メニュー 選択肢2<Br>
      移動メニュー 選択肢3<Br>
    </Div>
  </Layer>

</Body>
</Html>
 最低限動作させるだけならば、DIVを指定したハイパーリンクで表示させるだけなので、これだけで実現できます。デモ01

 <Div> 〜 </Div> の間のHTMLは、普通のタグを制約無しに挿入できます。
 例えば<Table>タグを挿入すると、このような形になります。デモ02

 ページを読み込みするためには、
  1:外部コンポーネントの読み込み
  2:初期データの読み込みと作成
  3:実際のウインドウ
 の3つを指定すれば良いということになります。

  <Layer>〜</Layer>は必須項目ではありませんが、このタグで<Div>タグを挟み込むことにより、対応していないネットスケープ4において、<Div>タグが表示されてしまう不具合が対処されます。(<Layer>タグはIE5やネットスケープ6では無視されます)


外部コンポーネントの読み込み
<Script Language = "Javascript" src="m_script.js"></Script>
必須入力項目です。 この一文で、外部コンポーネント呼び出しを行います。
src="〜"には、呼び出しするコンポーネントアドレスを入れてください。
 上記はHTMLと同じフォルダ内にコンポーネントが存在する場合です。 階層構造がある場合は、src="〜"に階層構造も入力する必要があります
例:src="data/h_script.js" HTMLファイルから見て、コンポーネントがdataフォルダの中にある場合

初期データの読み込みと作成
<Body OnLoad="startwindow()">
必須入力項目です。 必ずBODY に 「OnLoad="startwindow()"」の1文を追加してください。
このスクリプト文で、HTMLに書き込まれた<Div>タグの内容解析を開始します。

DIVデータの作成
<Div id="MoveDiv"> 〜 </Div>
実際に表示するウインドウを作成します。 大文字と小文字の区別がありますのでご注意ください。

DIV設置を行う際の注意事項    </Center>
 DIVを設置する場所は、ページ全体から見て、<Center>状態ではない事が必要です
 これは、Netscape系ブラウザの仕様によるものですが、<Div>タグのスタイルシートによる位置指定よりも、<Center>タグによる位置指定が優先されるために起こります。
 <Center>状態の場合、<Div>タグの位置情報にかかわらず真ん中に配置されてしまうため、表示が乱れる事になります。
 ページ内でコンテンツを中央配置している場合は、<Div>タグを使用する部位に関しては、かならず</Center>によって中央寄せを解除してください。



DIVメニューに表示させるメニューが大きくて、すべての内容が表示されていると鬱陶しいと言った場合には、マウスがDIVに乗っていない場合のDIV情報を別に作成することで、メニューを小さくまとめることが可能です。


<Html><Title>デモ</Title>
<Head>

  <Script Language = "Javascript" src="m_script.js"></Script>
</Head>

<Body OnLoad="startwindow()">

<Table border=01 width=100 height=1000>
  <Tr><Td>ダミー</Td></Tr>
</Table>

  <Layer visibility="hidden">
    <Div id="MoveDiv">
      <Table border=01 width=100>
        <Tr><Td>
          移動メニュー 選択肢1<Br>
          移動メニュー 選択肢2<Br>
          移動メニュー 選択肢3<Br>
          移動メニュー 選択肢4<Br>
          移動メニュー 選択肢5<Br>
        </Td></Tr>
      </Table>
    </Div>

    <Div id="MoveDiv_min">
      <Table border=01 width=100>
        <Tr><Td>最小化状態</Td></Tr>
      </Table>
    </Div>
  </Layer>

</Body>
</Html>

縮小版のメニューを作成するためには、新たに <Div id="MoveDiv_min">〜</Div>を作成し、ここにマウスがホバーしていないときのメニューを置くことによって判別します。    デモ03

最小化状態のDIVを挿入する場合
<Div id="MoveDiv_min"> 〜 </Div>
任意入力項目です。この<Div>に囲まれた部分は、マウスが <Div id="MoveDiv">〜</Div>に乗っていないときに表示されます。
 最小化状態のDIVが必要ない場合は、こ<Div>を記述する必要はありません。


1:特徴 / アーカイブ内容
2:設置の流れ
3:基本的な設置方法
4:より詳細な設定を付加する方法
▼ M E N U
トップページ

1:特徴
2:設置の流れ
3:設置方法
4:詳細な設定方法

使用許諾
▲ M E N U