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

水平型メニュー #1

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

水平型のメニューを表示するサンプルです。マウスをメニューに移動すると背景色が「青」でハイライトされます。メニューをクリックすると背景色が「黒」でハイライトされます。

このサンプルは、次のような３種類のイメージとCSSを利用して水平型のメニューを表示しています。カレントメニューのli要素には、CSSのクラス「current」を設定します。

.menu1{
  background: #fff url(images/button1.gif);
}
.menu1 li.current a{
  background: url(images/button3.gif);
}
.menu1 li.current a b{
  background: url(images/button3.gif) no-repeat right top;
}
.menu1 li a:hover{
  background: #000 url(images/button4.gif);
}
.menu1 li a:hover b{
  background: url(images/button4.gif) no-repeat right top;
}

CSS部HEAD部BODY部

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

            
.menu1
{
  padding: 0 0 0 32px;
  margin: 0;
  list-style: none;
  height: 35px;
  background: #fff url(images/button1.gif);
  position: relative;
  border: 1px solid #000;
  border-width: 0 1px;
  border-bottom: 1px solid #444;
}
.menu1 li
{
  float: left;
}
.menu1 li a
{
  display: block;
  float: left;
  height: 35px;
  line-height: 35px;
  color: #aaa;
  text-decoration: none;
  font-size: 11px;
  font-family: arial, verdana, sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 0 0 0 8px;
  cursor: pointer;
}
.menu1 li a b
{
  float: left;
  display: block;
  padding: 0 16px 0 8px;
}
.menu1 li.current a
{
  color: #fff;
  background: url(images/button3.gif);
}
.menu1 li.current a b
{
  background: url(images/button3.gif) no-repeat right top;
}
.menu1 li a:hover
{
  color: #fff;
  background: #000 url(images/button4.gif);
}
.menu1 li a:hover b
{
  background: url(images/button4.gif) no-repeat right top;
}
.menu1 li.current a:hover
{
  color: #fff;
  background: #000 url(images/button3.gif);
  cursor: default;
}
.menu1 li.current a:hover b
{
  background: url(images/button3.gif) no-repeat right top;
}

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

            
<link href="DhtmlAdvanced/cssHorizontalMenu1/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="menu1">
  <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選!

水平型メニュー #1

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

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

水平型メニュー #1

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

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