JavaScript + Ajax 実践サンプル集 - 水平型メニュー #2

水平型メニュー #2

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

このサンプルは、水平型のタブメニューを表示します。マウスをタブに移動するとタブがハイライトします。タブをクリックするとハイライトが固定されます。

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

このサンプルは、次のようなイメージとCSSを利用してタブ型の水平メニューを表示しています。

.menu2
{
  background: transparent url(images/tab_0c.gif) repeat-x left bottom;
}
.menu2 li a
{
  background: url(images/tab_0a.gif) no-repeat;
}
.menu2 li a b
{
  background: url(images/tab_0b.gif) no-repeat right top;
}
.menu2 li.current a
{
  background: url(images/tab_2a.gif) no-repeat;
}
.menu2 li.current a b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}
.menu2 li a:hover
{
  background: url(images/tab_1a.gif) no-repeat;
}
.menu2 li a:hover b
{
  background: url(images/tab_1b.gif) no-repeat right top;
}
.menu2 li.current a:hover
{
  background: url(images/tab_2a.gif) no-repeat;
}
.menu2 li.current a:hover b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}

CSS部HEAD部BODY部

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

            
.menu2
{
  padding: 5px 0 0 1em;
  margin: 0;
  list-style: none;
  height: 40px;
  position: relative;
  background: transparent url(images/tab_0c.gif) repeat-x left bottom;
  font-size: 11px;
}
.menu2 li
{
  float: left;
  height: 40px;
  margin-right: 1px;
}
.menu2 li a
{
  display: block;
  float: left;
  height: 40px;
  line-height: 35px;
  color: #333;
  text-decoration: none;
  font-family: arial, verdana, sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 0 0 0 4px;
  cursor: pointer;
  background: url(images/tab_0a.gif) no-repeat;
}
.menu2 li a b
{
  float: left;
  display: block;
  padding: 0 16px 5px 12px;
  background: url(images/tab_0b.gif) no-repeat right top;
}
.menu2 li.current a
{
  color: #000;
  background: url(images/tab_2a.gif) no-repeat;
}
.menu2 li.current a b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}
.menu2 li a:hover
{
  color: #000;
  background: url(images/tab_1a.gif) no-repeat;
}
.menu2 li a:hover b
{
  background: url(images/tab_1b.gif) no-repeat right top;
}
.menu2 li.current a:hover
{
  color: #000;
  background: url(images/tab_2a.gif) no-repeat;
  cursor: default;
}
.menu2 li.current a:hover b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}

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

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

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

            
<ul class="menu2">
  <li class="current"><a href="#nogo"><b>jQuery</b></a></li>
  <li><a href="#nogo"><b>Selectors</b></a></li>
  <li><a href="#nogo"><b>Events</b></a></li>
  <li><a href="#nogo"><b>Traversing</b></a></li>
  <li><a href="#nogo"><b>Manipulating</b></a></li>
  <li><a href="#nogo"><b>Core UI Effects</b></a></li>    
  <li><a href="#nogo"><b>Ajax</b></a></li>
</ul>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

水平型メニュー #2

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

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

水平型メニュー #2

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

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