JavaScript + Ajax 実践サンプル集

Single Menu (Flags)

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

このサンプルは、スタイルシート(CSS)を使用してフラグ型のメニューを表示します。マウスをメニューに移動すると反転表示します。メニューをクリックすると反転表示を固定します。

このサンプルはイメージを一切使用しないでスタイルシートのみでフラグ型のメニューを表示しています。

#menu
{
  padding: 0 0 0 50px;
  margin: 0;
  list-style: none;
  width: 650px;
  float: right;
  border-top: 5px solid #844;
  margin-top: -40px;
}
#menu li
{
  float: left;
  margin-right: 15px;
}
#menu li a
{
  display: block;
  width: 0;
  height: 0;
  border-left: 35px solid #fff;
  border-right: 35px solid #fff;
  border-bottom: 35px dashed transparent;
  position: relative;
  font-family: arial, sans-serif;
  font-size: 11px;
  color: #000;
  text-decoration: none;
  top: 48px;
}
#menu li b
{
  position: absolute;
  left: -35px;
  top: -50px;
  height: 50px;
  width: 70px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  background: #fff;
}

<!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 - Single Menu Flags</title>
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" />
<link href="DhtmlAdvanced/cssSingleMenuFlags/single_fourteen.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $("#menu li").click(function() {
    $("#menu li a").removeClass("active");
    $(this).children("a").addClass("active");
    $("#h2left").html($(this).children("a").html());
  });
});
</script>
</head>
<body>

<div id="header">
    <h1>CSS Menu (Flags)</h1>
    <div id="pad"></div>
    <ul id="menu">
      <li id="jquery"><a href="#"  class="active"><b>jQuery</b></a></li>
      <li id="selectors"><a href="#"><b>Selectors</b></a></li>
      <li id="events"><a href="#"><b>Events</b></a></li>
      <li id="traversing"><a href="#"><b>Traversing</b></a></li>
      <li id="uieffects"><a href="#"><b>UI Effects</b></a></li>
      <li id="manipulating"><a href="#"><b>Manipulating</b></a></li>
      <li id="ajax"><a href="#"><b>Ajax</b></a></li>
    </ul>
  </div>
  
  <div id="content">
    <div class="leftCol">
      <div class="inner">
        <h2 id="h2left">jQuery</h2>
        <p>
        </p>
      </div>
    </div>      
    <div class="rightCol">
      <div class="inner">
        <h2 id="h2right" >JavaScript + Ajax</h2>
        <p>
        </p>
      </div>
    </div>      
    <br class="clear" />
  </div>
  
</div>

<div id="footerTop">
  <div id="footerT">
    <div class="leftCol">
      <div class="inner">
        <p>Copyright ©2009 </p>
      </div>
    </div>
    <div class="rightCol foot">
      <div class="inner"> 
      </div>
    </div>
    <br class="clear" />
  </div>
</div>

</body>
</html>

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

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

            
$(function() {
  $("#menu li").click(function() {
    $("#menu li a").removeClass("active");
    $(this).children("a").addClass("active");
    $("#h2left").html($(this).children("a").html());
  });
});

ボックス内のスタイルシート(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.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#pad
{
  height: 80px;
}
#menu
{
  padding: 0 0 0 50px;
  margin: 0;
  list-style: none;
  width: 650px;
  float: right;
  border-top: 5px solid #844;
  margin-top: -40px;
}
#menu li
{
  float: left;
  margin-right: 15px;
}
#menu li a
{
  display: block;
  width: 0;
  height: 0;
  border-left: 35px solid #fff;
  border-right: 35px solid #fff;
  border-bottom: 35px dashed transparent;
  position: relative;
  font-family: arial, sans-serif;
  font-size: 11px;
  color: #000;
  text-decoration: none;
  top: 48px;
}
#menu li b
{
  position: absolute;
  left: -35px;
  top: -50px;
  height: 50px;
  width: 70px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  background: #fff;
}

/*
.jquery #menu li#jquery a
{
  color: #fff;
  border-left: 35px solid red;
  border-right: 35px solid red;
}
.jquery #menu li#jquery b
{
  background: red;
}
.selectors #menu li#selectors a
{
  color: #fff;
  border-left: 35px solid orange;
  border-right: 35px solid orange;
}
.selectors #menu li#selectors b
{
  background: orange;
}
.events #menu li#events a
{
  color: #fff;
  border-left: 35px solid #cc0;
  border-right: 35px solid #cc0;
}
.events #menu li#events b
{
  background: #cc0;
}
.traversing #menu li#traversing a
{
  color: #fff;
  border-left: 35px solid green;
  border-right: 35px solid green;
}
.traversing #menu li#traversing b
{
  background: green;
}
.uieffects #menu li#uieffects a
{
  color: #fff;
  border-left: 35px solid blue;
  border-right: 35px solid blue;
}
.uieffects #menu li#uieffects b
{
  background: blue;
}
.manipulating #menu li#manipulating a
{
  color: #fff;
  border-left: 35px solid indigo;
  border-right: 35px solid indigo;
}
.manipulating #menu li#manipulating b
{
  background: indigo;
}
.ajax #menu li#ajax a
{
  color: #fff;
  border-left: 35px solid violet;
  border-right: 35px solid violet;
}
.ajax #menu li#ajax b
{
  background: violet;
}
*/


#menu li#jquery a:hover, #menu li#jquery a:active, #menu li#jquery a:focus, #menu li#jquery a.active
{
  color: #fff;
  border-left: 35px solid red;
  border-right: 35px solid red;
}
#menu li#jquery a:hover b, #menu li#jquery a:active b, #menu li#jquery a:focus b, #menu li#jquery a.active b
{
  background: red;
}
#menu li#selectors a:hover, #menu li#selectors a:active, #menu li#selectors a:focus, #menu li#selectors a.active
{
  color: #fff;
  border-left: 35px solid orange;
  border-right: 35px solid orange;
}
#menu li#selectors a:hover b, #menu li#selectors a:active b, #menu li#selectors a:focus b, #menu li#selectors a.active b
{
  background: orange;
}
#menu li#events a:hover, #menu li#events a:active, #menu li#events a:focus, #menu li#events a.active
{
  color: #fff;
  border-left: 35px solid #cc0;
  border-right: 35px solid #cc0;
}
#menu li#events a:hover b, #menu li#events a:active b, #menu li#events a:focus b, #menu li#events a.active b
{
  background: #cc0;
}
#menu li#traversing a:hover, #menu li#traversing a:active, #menu li#traversing a:focus, #menu li#traversing a.active
{
  color: #fff;
  border-left: 35px solid green;
  border-right: 35px solid green;
}
#menu li#traversing a:hover b, #menu li#traversing a:active b, #menu li#traversing a:focus b, #menu li#traversing a.active b
{
  background: green;
}
#menu li#uieffects a:hover, #menu li#uieffects a:active, #menu li#uieffects a:focus, #menu li#uieffects a.active
{
  color: #fff;
  border-left: 35px solid blue;
  border-right: 35px solid blue;
}
#menu li#uieffects a:hover b, #menu li#uieffects a:active b, #menu li#uieffects a:focus b, #menu li#uieffects a.active b
{
  background: blue;
}
#menu li#manipulating a:hover, #menu li#manipulating a:active, #menu li#manipulating a:focus, #menu li#manipulating a.active
{
  color: #fff;
  border-left: 35px solid indigo;
  border-right: 35px solid indigo;
}
#menu li#manipulating a:hover b, #menu li#manipulating a:active b, #menu li#manipulating a:focus b, #menu li#manipulating a.active b
{
  background: indigo;
}
#menu li#ajax a:hover, #menu li#ajax a:active, #menu li#ajax a:focus, #menu li#ajax a.active
{
  color: #fff;
  border-left: 35px solid violet;
  border-right: 35px solid violet;
}
#menu li#ajax a:hover b, #menu li#ajax a:active b, #menu li#ajax a:focus b, #menu li#ajax a.active b
{
  background: violet;
}

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

            
<link href="DhtmlAdvanced/cssMenus/cssmenus.css" rel="stylesheet" type="text/css" />
<link href="DhtmlAdvanced/cssSingleMenuFlags/single_fourteen.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>

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

            
<div id="wrapper">

  <div id="header">
    <h1>CSS Menu (Flags)</h1>
    <div id="pad"></div>
    <ul id="menu">
      <li id="jquery"><a href="#"  class="active"><b>jQuery</b></a></li>
      <li id="selectors"><a href="#"><b>Selectors</b></a></li>
      <li id="events"><a href="#"><b>Events</b></a></li>
      <li id="traversing"><a href="#"><b>Traversing</b></a></li>
      <li id="uieffects"><a href="#"><b>UI Effects</b></a></li>
      <li id="manipulating"><a href="#"><b>Manipulating</b></a></li>
      <li id="ajax"><a href="#"><b>Ajax</b></a></li>
    </ul>
  </div>
  
  <div id="content">
    <div class="leftCol">
      <div class="inner">
        <h2 id="h2left">jQuery</h2>
        <p>
        </p>
      </div>
    </div>      
    <div class="rightCol">
      <div class="inner">
        <h2 id="h2right" >JavaScript + Ajax</h2>
        <p>
        </p>
      </div>
    </div>      
    <br class="clear" />
  </div>
  
</div>

<div id="footerTop">
  <div id="footerT">
    <div class="leftCol">
      <div class="inner">
        <p>Copyright ©2009 </p>
      </div>
    </div>
    <div class="rightCol foot">
      <div class="inner"> 
      </div>
    </div>
    <br class="clear" />
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

Single Menu (Flags)

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

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

Single Menu (Flags)

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

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