2013年05月03日

タブメニュー

スポンサード リンク

 JavaScriptとCSSでタブメニュー
display = 'block'; display = 'none';

// HTMLタブの内容。
<ul id="tabList">
 <li id="tabList1">HTML</li>
 <li id="tabList2">CSS</li>
 <li id="tabList3">JavaScript</a></li>
</ul>
// CSSタブの内容
floatプロパティ float:left;
指定した要素を左に配置して、それに続く内容を
右側に回り込ませます。
疑似クラス a:hover
アンカーテキストにマウスが来たときに
アンカーのスタイルを変更する という動作を、JavaScriptを利用しなくても
スタイルシートだけで実行する事が出来ます。
display プロパティ
display プロパティは表示の仕方を指定する
プロパティです。このサンプルでも使っています。
// JavaScriptタブの内容。
function cngTab(IDname) {
 var inNer=document.getElementById('inner');
 var inDiv=inNer.getElementsByTagName('div');
for (var i = 0; i < inDiv.length;i++) {
 inDiv[i].style.display = 'none'; }
document.getElementById(IDname).style.display = 'block';  }

ロリポップ!のドメインは選べる全85種類!!
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<html>
 <head>
<title>タブメニュー</title>
 <style type="text/css">
<!--
     /* タブメニュー表示領域 */
.tabbox {
  width: 400px;
   }

     /* タブ部分 */
#tabList {
 list-style-type:none;/* リストマーク非表示 */
 margin: 0; padding: 0;/* マージン,パディング初期化 */
  }
#tabList li{
 float: left;  /* 回り込み */
 margin-right:1px; /* 右側のマージン */
 border-radius: 10px 10px 0 0; /* 角丸 (右上、左上) */
 text-shadow:2px 2px 2px #000; /*影文字(縦方向ずれ、横方向ずれ、ぼかし半径、影の色)*/
   }
#tabList li a {
   display: block; /* ブロックレベル表示 */
   width: 100px;
   padding: 3px; /* 内側余白 */
   text-align: center;/* 文字 中央揃え */
   text-decoration : none; /* 文字飾り(下線、上線、取消線)なし */
   font-weight : bold; /* フォントの太さ bold(太い) */
   color: white; /* 文字の色 */
     }
#tabList li a:hover { /*マウスポインタが乗った時*/
   color: yellow;
   text-decoration : underline; /*文字飾り,下線付加*/
    }

     /*タブの背景色 */
#tabList1 { background-color: blue; }
#tabList2 { background-color: #00b51e;}
#tabList3 { background-color: #cc0099; }

     /* タブ内容の表示ボックス */
#inner div {
 height: 150px; overflow: auto; /* 内容が溢れたらスクロールバー 表示 */
 clear: left; /* 回りこみ解除 */
 padding:0.5em;
 border-radius: 0 0 5px 5px; /* 角丸 (右下、左下) */
   }

/* タブ内容 */
#tab1 {
   border: 2px solid blue; /* ボーダー : 幅,線種,色 */
   border-top-width : 5px; /* 上ボーダー : 幅 */
   background-color: #f0ffff; /* 背景色 */
    }
#tab2 {
   border: 2px solid #00b51e;
   border-top-width : 5px;
   background-color : #e8ffd9;
    }
#tab3 {
   border: 2px solid #cc0099;
   border-top-width : 5px;
   background-color : #ffeeff;
    }
-->
</style>
<script type="text/javascript">
 <!--
function cngTab(IDname) {
      // 全部非表示 ボックス非生成(当該要素の領域を確保しない)
  var inNer = document.getElementById('inner');
  var inDiv = inNer.getElementsByTagName('div');
   for (var i = 0; i < inDiv.length;i++) {
    inDiv[i].style.display = 'none';
       }
     // 引数 'IDname'の要素を表示(当該要素の領域を確保)
    document.getElementById(IDname).style.display = 'block';
      }
 // -->
</script>
</head>
<body>
   <div class="tabbox">
     <ul id="tabList"><!--UL要素 リスト、箇条書き-->
      <li id="tabList1"><a href="javascript:cngTab('tab1')">HTML</a></li>
      <li id="tabList2"><a href="javascript:cngTab('tab2')">CSS</a></li>
      <li id="tabList3"><a href="javascript:cngTab('tab3')">JavaScript</a></li>
     </ul>
  <div id="inner">
     <div id="tab1">// HTMLタブの内容。
   </div>
    <div id="tab2">// CSSタブの内容
      </div>
    <div id="tab3">// JavaScriptタブの内容。
      </div>
   </div>
 </div>
<script type="text/javascript">
<!--
cngTab("tab1");// デフォルトのタブを選択 
 -->
</script>
</body>
</html>
display プロパティ
display プロパティは当該要素の表示形式を指定します。
HTML 内容
CSS 内容
JavaScript 内容

上記のボタンを押してください。それぞれのボタンで、
その内容の表示(display:block) / 非表示(display:none)を切り替えています。
display:none;を指定すると当該要素は領域そのものを生成しないので非表示になります。

上のサンプルで、すべての内容を表示にしてHTML 内容を非表示にしてください。
下の内容がせり上がります。これで "当該要素の領域も確保しない"ことが判ります。
display:block;はブロックレベルで表示します。

JavaScript 構文:
object.style.display='block';
object.style.display='none';
posted by javaScript at 20:06 | 大阪 ☀ | メニュー作成 | このブログの読者になる | 更新情報をチェックする

2009年08月28日

ナビゲーションメニュー

スポンサード リンク


横並びナビゲーションメニュー

背景色を全部変えてみました。,,,,,

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額263円で容量1GB
Movable TypeやWordpressだって使えるよ。

サンプルソース

<html>
<head>
<title>横並びナビゲーションメニュー</title>
<style type="text/css">
<!--

.Mbox1{
   width : 570px;
  }

.List-ul{
   list-style-type : none;   /*リストマークなし*/
  }

.List-li{
   float : left; 
   width : 90px;               /* 「li」タグの幅 */
   background-color : #defafe;  /* 背景色 */
   text-align : center;         /* 文字位置 中央 */
   margin-right : 2px;          /* 右のマージン 余白 */
  }

.List-li a{
   color : blue;             /* 「li」タグのリンク文字の色 */
   font-weight : bold;       /* 文字の太さ 太い */
   text-decoration : none;   /* 文字飾り なし */
   line-height : 1.5em;      /* 行の高さ*/
   border-width : 1px;       /* ボーダーの幅 */
   border-style : solid;     /* 実線 */
   border-color : #c9c9c9;   /* 色 */
   display: block;
  }

.List-li a:hover{  /*マウスポインタがリンクの上に来た時*/
   color : white;                /* 「li」タグのリンク文字の色 */
   text-decoration : underline;  /* 文字飾り 下線 */
  }

-->
</style>

</head>
<body>

<div class="Mbox">
 <ul class="List-ul">
 <li class="List-li" onmouseover ="this.style.background='red'"
   onmouseout ="this.style.background='#defafe'"
><a href="#">Topページ</a></li>

<li class="List-li" onmouseover ="this.style.background='orange'"
   onmouseout ="this.style.background='#defafe'"><a href="#">Javascript</a></li>

<li class="List-li" onmouseover ="this.style.background='yellow'"
   onmouseout ="this.style.background='#defafe'"><a href="#">CSS</a></li>

<li class="List-li" onmouseover ="this.style.background='green'"
   onmouseout ="this.style.background='#defafe'"><a href="#">画像全般</a></li>

<li class="List-li" onmouseover ="this.style.background='blue'"
   onmouseout ="this.style.background='#defafe'"><a href="#">マウス操作</a></li>

<li class="List-li" onmouseover ="this.style.background='purple'"
   onmouseout ="this.style.background='#defafe'"><a href="#">テーブル</a></li>
</ul>
</div>

</body>
</html>

float 回り込みを設定するプロパティです。
  float : left;  // li要素を横に並べます。
floatプロパティ float:left; float:right;
 display: block;  // ブロックレベル要素のように表示させます。li要素でもクリックが可能になります。
スタイルシート css を使った横並びリストメニュー

onmouseover ="this.style.background='red'"
   onmouseout ="this.style.background='#defafe'"


  onmouseover はマウスが領域の上に乗った時に発生するイベントです。
this は自分自身の要素です。この場合は"li"タグになります。
マウスが乗った時この要素のスタイル.背景色を'red'に変えます。
 onmouseout はマウスが領域を去った時です。背景色を元の色'#defafe'に戻します。

マウスオーバーイベント
画像にマウスを乗せると説明文を表示します。
onmouseover マウスが上にくると画像が拡大します。

posted by javaScript at 16:36 | 大阪 ☁ | メニュー作成 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。