JavaScript + Ajax 実践サンプル集

左側にメニューを表示

説明補足説明コードコメント投稿

このサンプルは、右側に配置したナビゲーションメニューを左側に表示させます。SEO(検索エンジンの最適化）を考慮すると、本文はbodyタブの直後に配置するのが効果的です。ところが、ナビゲーションメニューを左側に表示させるとbodyタグの直後がメニューになってしまいます。ここでは、table要素のトリックを利用して右側に配置したメニューを左側に表示します。具体的なメニューの配置は、ソースコードを参照してください。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

このサンプルを編集して試してみる!

２列の表(table)を作成して、１行目の１列を空にするのがポイントです。この場合、２行目の１列に宣言したメニューが１行目の１列に表示されます。

<table width="100%" border="0">
  <tr>
    <td width="20%" valign="top" bgcolor="red"></td>      
    <td width="80%" valign="top" rowspan="2" bgcolor="cyan">
      ここに本文を記述する・・・            
    </td>
  </tr>
  <tr>
    <td width="20%" valign="top" bgcolor="yellow">
      <a href="#">メニュー１</a><br />
      <a href="#">メニュー２</a><br />
      <a href="#">メニュー３</a><br />
    </td>
  </tr>
</table>

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

左側にメニューを表示