JavaScript + Ajax 実践サンプル集

円形型メニュー

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

このサンプルは、メニューを円の周りに表示します。メニューにマウスを移動すると円の中にメニュー項目とヘルプ情報が表示されます。

円形型のメニューに表示するイメージは、CSSのbackgroundプロパティで設定しています。

#circularMenu li.home
{
  left: 120px;
  top: 4px;
  background: url(images/home.gif) no-repeat center center;
}

HOME

<!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>円形型メニュー</title>
 <link href="DhtmlAdvanced/cssCircularMenu/base.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
 <div id="demo"> 
 <ul id="circularMenu">
 <li class="home">
 <a href="#url">HOME ホームに戻る</a>
 </li>
 <li class="chat">
 <a href="#url">CHAT 友達とリアルタイムでチャットする</a>
 </li>
 <li class="email">
 <a href="#url">EMAIL 管理人にメールを送信する</a>
 </li>
 <li class="shop">
 <a href="#url">SHOP あなたの必要なモノを買い物する</a>
 </li>
 <li class="delivery">
 <a href="#url">DELIVERY 商品の配送状況を追跡する</a>
 </li>
 <li class="search">
 <a href="#url">SEARCH このサイトを検索する</a>
 </li>
 <li class="address">
 <a href="#url">ADDRESS あなたの住所を登録する</a>
 </li>
 <li class="upload">
 <a href="#url">UPLOAD 当サイトに写真をアップロードする</a>
 </li>
 </ul> 
 </div>
</div>

</body>
</html>

CSS部HEAD部BODY部

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

            
/*
**  Mac OS X, Win Vista, Win XP, Win 2000のフォントを指定
*/
body
{
  font-size: 76%;
  font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo, Osaka, "ＭＳ Ｐゴシック" ,　 "MS P Gothic" , sans-serif;
  background: #fff;  /*  #f0f0f0 */
}

#demo
{
  padding-bottom: 100px;
}

#circularMenu
{
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
  width: 300px;
  height: 300px;
  background: #fff url(images/background.gif) no-repeat;
}

#circularMenu li
{
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
}

#circularMenu li.home
{
  left: 120px;
  top: 4px;
  background: url(images/home.gif) no-repeat center center;
}

#circularMenu li.chat
{
  left: 200px;
  top: 40px;
  background: url(images/chat.gif) no-repeat center center;
}

#circularMenu li.upload
{
  left: 35px;
  top: 40px;
  background: url(images/photo.gif) no-repeat center center;
}

#circularMenu li.email
{
  left: 230px;
  top: 115px;
  background: url(images/email.gif) no-repeat center center;
}

#circularMenu li.address
{
  left: 5px;
  top: 115px;
  background: url(images/address.gif) no-repeat center center;
}

#circularMenu li.shop
{
  left: 200px;
  top: 190px;
  background: url(images/shop.gif) no-repeat center center;
}

#circularMenu li.search
{
  left: 35px;
  top: 190px;
  background: url(images/search.gif) no-repeat center center;
}

#circularMenu li.delivery
{
  left: 120px;
  top: 225px;
  background: url(images/delivery.gif) no-repeat center center;
}

#circularMenu li a b
{
  display: none;
}

#circularMenu li a
{
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
}

#circularMenu li a:hover
{
  background: url(images/circle.gif);
  text-decoration: none;
  /* font-family: georgia, serif; */
}

#circularMenu li a:hover b
{
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  font-size: 16px;
  color: #63352c;
  background: #fff;
}

#circularMenu li a:hover b span
{
  display: block;
  font-size: 12px;
  color: #888;
  font-weight: normal;
  margin-top: 15px;  
}

#circularMenu li.home a:hover b
{
  left: -22px;
  top: 100px;  
}

#circularMenu li.chat a:hover b
{
  left: -102px;
  top: 64px;
}

#circularMenu li.upload a:hover b
{
  left: 63px;
  top: 64px;
}

#circularMenu li.email a:hover b
{
  left: -132px;
  top: -11px;
}

#circularMenu li.address a:hover b
{
  left: 93px;
  top: -11px;
}

#circularMenu li.shop a:hover b
{
  left: -102px;
  top: -87px;
}

#circularMenu li.search a:hover b
{
  left: 63px;
  top: -87px;
}

#circularMenu li.delivery a:hover b
{
  left: -22px;
  top: -121px;
}

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

            
<link href="DhtmlAdvanced/cssCircularMenu/base.css" rel="stylesheet" type="text/css" />

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

            
<div id="wrapper">
  <div id="demo">     
    <ul id="circularMenu">
      <li class="home">
        <a href="#url"><b>HOME<br /><span>ホームに戻る</span></b></a>
      </li>
      <li class="chat">
        <a href="#url"><b>CHAT<br /><span>友達とリアルタイムでチャットする</span></b></a>
      </li>
      <li class="email">
        <a href="#url"><b>EMAIL<br /><span>管理人にメールを送信する</span></b></a>
      </li>
      <li class="shop">
        <a href="#url"><b>SHOP<br /><span>あなたの必要なモノを買い物する</span></b></a>
      </li>
      <li class="delivery">
        <a href="#url"><b>DELIVERY<br /><span>商品の配送状況を追跡する</span></b></a>
      </li>
      <li class="search">
        <a href="#url"><b>SEARCH<br /><span>このサイトを検索する</span></b></a>
      </li>
      <li class="address">
        <a href="#url"><b>ADDRESS<br /><span>あなたの住所を登録する</span></b></a>
      </li>
      <li class="upload">
        <a href="#url"><b>UPLOAD<br /><span>当サイトに写真をアップロードする</span></b></a>
      </li>
    </ul>     
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

円形型メニュー

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

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

円形型メニュー

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

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