JavaScript + Ajax 実践サンプル集 - 垂直型タブメニュー

垂直型タブメニュー　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

垂直型のタブメニューを表示するサンプルです。マウスをタブ上に移動するとタブが凹みます。タブをクリックするとメニューが「黒」に変わります。

タブ型のメニューは、次のようなイメージとCSSを利用して実現しています。タブは３パターンのイメージから構成されています。それぞれのパターンを利用するには、 CSSのbackground-positionプロパティに「left top」「left center」「left bottom」を設定します。カレントタブのa要素には、CSSのクラス「current」を設定します。

#menu a, #menu a:visited
{
  background: url(images/buttons.gif);
  background-position: left top;
}
#menu a:hover
{
  background-position: left center;
}

#menu a.current, #menu a.current:hover
{
  background-position: left bottom;
}

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#info
{
  height: 400px;
}
#menu
{
  position: relative;
  margin-top: 20px;
  left: 5px;
  display: block;
  width: 350px;
}
#menu a, #menu a:visited
{
  display: block;
  width: 150px;
  height: 30px;
  background: url(images/buttons.gif);
  background-position: left top;
  background-color: transparent;
  text-align: center;
  color: #c00;
  line-height: 28px;
  text-decoration: none;
  font-family: arial, sans-serif;
  font-weight: bold;
  margin-top: 5px;
}
#menu a:hover
{
  background-position: left center;
  line-height: 31px;
  overflow: hidden;
  color: #800;
}

#menu a.current, #menu a.current:hover
{
  background-position: left bottom;
  line-height: 30px;
  cursor: default;
  color: #000;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/cssVerticalTabbedMenu/base.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('a').click(function() {
    $('a').removeClass('current');
    $(this).addClass('current');
  });
});
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">   
  <div id="info">
    <div id="menu">
      <a href="#" class="current">jQuery</a> 
      <a href="#">Events</a> 
      <a href="#">Traversing</a>
      <a href="#">Manupulating</a> 
      <a href="#">Core UI Effects</a>
      <a href="#">Ajax</a>
    </div>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

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

垂直型タブメニュー　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

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

垂直型タブメニュー 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

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

垂直型タブメニュー　《プログラマーがネットで副収入を得る方法とは》