JavaScript + Ajax 実践サンプル集 - タブがテキストにフィットするタブ型メニュー

タブがテキストにフィットするタブ型メニュー

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

このサンプルは、CSS3のスタイルシートを利用してタブがテキストの長さにフィットするタブ型のメニューを表示します。ここでは、CSS3のborder radius, drop shadow, gradient fillなどのエフェクトを適用してタブが立体的に見えるようにしています。マウスをタブ上に移動するとハイライトします。このサンプルは、Firefox, Safari, Google Chrome用に最適化されています。 IEには最適化されていません。 IEを利用しているときは、フラットなタブ型メニューになります。

このサンプルを編集して試してみる

CSS部HEAD部BODY部

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

            
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times.
Copyright (c) 2010 Stu Nicholls. All rights reserved.
=================================================================== */

.tabmenu
{
  padding: 0 50px;
  margin: 0;
  list-style: none;
  height: 32px;
  border-bottom: 1px solid #000;
}
.tabmenu li
{
  float: left;
  margin-right: 2px;
}


.tabmenu li a
{
  display: block;
  line-height: 32px;
  color: #000;
  font-family: arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-decoration: none;
  padding: 0 15px;
  text-decoration: none;
  background: #aaa;
  border: 1px solid #000;
  border-bottom: 0;
  text-shadow: -1px -1px 6px rgba(255, 255, 255, 0.6), -1px -1px 1px #fff;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  -moz-box-shadow: 0px -1px 10px rgba(80, 80, 80, 0.5);
  -webkit-box-shadow: 0px -1px 10px rgba(80, 80, 80, 0.5);
  box-shadow: 0px -1px 10px rgba(80, 80, 80, 0.5);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(30%,  rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0));
}

.tabmenu li a:hover
{
  background: #069;
  color: #fff;
  text-shadow: -1px -1px 6px rgba(0, 0, 0, 0.6), -1px -1px 1px #000;
  text-decoration: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.4)), color-stop(30%,  rgba(255, 255, 255, 0.2)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0));
}

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

            
<link href="DhtmlAdvanced/fittedTabs/style.css" rel="stylesheet" type="text/css" />

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

            
<div id="wrapper">
  <div id="info">
    <ul class="tabmenu">
      <li><a href="#x">MENU1</a></li>
      <li><a href="#x">MENU2 with DESC</a></li>
      <li><a href="#x">MENU3</a></li>
      <li><a href="#x">MENU4 (descrption)</a></li>
      <li><a href="#x">MENU5</a></li>
      <li><a href="#x">MENU6</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選!