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年以上新しい記事の投稿がないブログに表示されております。