JavaScript + Ajax 実践サンプル集 - jQueryのAPIを利用したクリック型メニュー

jQueryのAPIを利用したクリック型メニュー

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

このサンプルは、スタイルシートとjQueryを使用してシンプルなクリック型のメニューを表示します。トップメニューをクリックするとサブメニューがドロップダウンします。サブメニューが表示されている状態でトップメニューをクリックすると消えます。

このサンプルは、jQueryのaddClass(), removeClass(), hasClass() apiを使用して実現しています。

$('.sub').click(function() {
  $('.unclick').removeClass('unclick');
  $('.click').removeClass('click').addClass('unclick');

  if ($(this).hasClass('unclick')) {
    $(this).removeClass('unclick');
  }
  else {
    $(this).addClass('click');
  }
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Menu - Simple Click Menu </title>
<link href="DhtmlAdvanced/cssMenuSimpleClickMenu/simple.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('.sub').click(function() {
    $('.unclick').removeClass('unclick');
    $('.click').removeClass('click').addClass('unclick');

if ($(this).hasClass('unclick')) {
      $(this).removeClass('unclick');
    }
    else {
      $(this).addClass('click');
    }
  });
});  
</script>
</head>
<body>

<div id="outer">
  
    <ul id="menu">
      <li class="sub">Live Demos
        <ul>
          <li><a href="#nogo1">Live Demos 1</a></li>
          <li><a href="#nogo2">Live Demos 2</a></li>
          <li><a href="#nogo3">Live Demos 3</a></li>
          <li><a href="#nogo4">Live Demos 4</a></li>
          <li><a href="#nogo5">Live Demos 5</a></li>  
        </ul>
      </li>
      <li class="sub">New Demos
        <ul>
          <li><a href="#nogo6">New Demos 1</a></li>
          <li><a href="#nogo7">New Demos 2</a></li>
          <li><a href="#nogo8">New Demos 3</a></li>
          <li><a href="#nogo9">New Demos 4</a></li>
        </ul>
      </li>
      <li class="sub">Cool Demos
        <ul>
          <li><a href="#nogo10">Cool Demos 1</a></li>
          <li><a href="#nogo11">Cool Demos 2</a></li>
          <li><a href="#nogo12">Cool Demos 3</a></li>
        </ul>
      </li>
      <li class="sub">Hot Demos
        <ul>
          <li><a href="#nogo13">Hot Demos 1</a></li>
          <li><a href="#nogo14">Hot Demos 2</a></li>
          <li><a href="#nogo15">Hot Demos 3</a></li>
          <li><a href="#nogo16">Hot Demos 4</a></li>
          <li><a href="#nogo17">Hot Demos 5</a></li>
          <li><a href="#nogo18">Hot Demos 6</a></li>
        </ul>
      </li>
    </ul>
    
  </div>

</body>
</html>

外部スクリプトCSS部HEAD部BODY部

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

            
$(function() {
  $('.sub').click(function() {
    $('.unclick').removeClass('unclick');
    $('.click').removeClass('click').addClass('unclick');

    if ($(this).hasClass('unclick')) {
      $(this).removeClass('unclick');
    }
    else {
      $(this).addClass('click');
    }
  });
});

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

            
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/simple.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#outer
{
  width: 748px;
  height: 300px;
  background: url(clock.jpg) no-repeat right bottom;
  border: 1px solid #ddd;
  border-width: 5px 1px 1px;
  position: relative;
}

#menu
{
  list-style-type: none;
  width: 644px;
  padding: 0;
  margin: 0 auto;
}
#menu ul
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li
{
  float: left;
  background: #088;
  margin: 1px 1px 0 0;
  position: relative;
}
#menu li.sub
{
  background: #f80;
}
#menu li, #menu li a
{
  display: block;
  color: #fff;
  font-family: arial, sans-serif;
  font-size: 11px;
  line-height: 24px;
  width: 160px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}
#menu li:hover, #menu li a:hover
{
  background: #c00;
}
#menu ul
{
  position: absolute;
  left: -9999px;
  width: 128px;
}
#menu li.click
{
  background: #c00;
}
#menu li.click ul
{
  left: 0;
  top: 24px;
  background: url(transparent.gif);
}
/* the background image is for IE7 */

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

            
<link href="DhtmlAdvanced/cssMenuSimpleClickMenu/simple.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>

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

            
  <div id="outer">
  
    <ul id="menu">
      <li class="sub">Live Demos
        <ul>
          <li><a href="#nogo1">Live Demos 1</a></li>
          <li><a href="#nogo2">Live Demos 2</a></li>
          <li><a href="#nogo3">Live Demos 3</a></li>
          <li><a href="#nogo4">Live Demos 4</a></li>
          <li><a href="#nogo5">Live Demos 5</a></li>  
        </ul>
      </li>
      <li class="sub">New Demos
        <ul>
          <li><a href="#nogo6">New Demos 1</a></li>
          <li><a href="#nogo7">New Demos 2</a></li>
          <li><a href="#nogo8">New Demos 3</a></li>
          <li><a href="#nogo9">New Demos 4</a></li>
        </ul>
      </li>
      <li class="sub">Cool Demos
        <ul>
          <li><a href="#nogo10">Cool Demos 1</a></li>
          <li><a href="#nogo11">Cool Demos 2</a></li>
          <li><a href="#nogo12">Cool Demos 3</a></li>
        </ul>
      </li>
      <li class="sub">Hot Demos
        <ul>
          <li><a href="#nogo13">Hot Demos 1</a></li>
          <li><a href="#nogo14">Hot Demos 2</a></li>
          <li><a href="#nogo15">Hot Demos 3</a></li>
          <li><a href="#nogo16">Hot Demos 4</a></li>
          <li><a href="#nogo17">Hot Demos 5</a></li>
          <li><a href="#nogo18">Hot Demos 6</a></li>
        </ul>
      </li>
    </ul>
    
  </div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのAPIを利用したクリック型メニュー

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

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

jQueryのAPIを利用したクリック型メニュー

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

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