コンテンツを切り替えるやつの基本的なビジュアルパターン

holydesign

2010-08-02 00:37:38

License: MIT License

Fork: 0

Fav: 0

View: 614

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 10 lines
HTML 130 lines
CSS 141 lines

コンテンツを切り替えるやつの基本的なビジュアルパターン
Switcher
MooTools Core 1.2.4

<h2>コンテンツを切り替えるやつの基本的なビジュアルパターン</h2>
<p>コンテンツを切り替えるやつをそのまま使用して、スタイルのバリエーションで修正の際の負担を軽減させる。</p>
<p>スクリプトの書き直し、スタイルの修正をできるだけ減らすには、開発する前にある程度、汎用性を意識することで回避できる。</p>
<p>といっても時間的な余裕はそんなにないのだが....。</p>

<h3>上にメニューがあるパターン</h3>
<p>即に言うタブ。コンテンツ量を気にしなくていいので楽。但しメニューが多くなる場合、使用するのは向いていない。</p>
<div id="tab" class="switcher tab">
  <ul class="nav">
    <li><a href="#panel-1">panel-1</a></li>
    <li><a href="#panel-1">panel-2</a></li>
    <li><a href="#panel-1">panel-3</a></li>
  </ul>
  <div class="panel">
    <h3>panel-1</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-2</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-3</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
</div>

<h3>左にメニューがあるパターン</h3>
<p>コンテンツ量を気にしなくていいので楽。メニューが増えても耐えられるようになる。但しローカルナビなどが左にくると、ナビゲーションが左によるのでうざくなる。</p>
<div id="left" class="switcher left">
  <ul class="nav">
    <li><a href="#panel-1">panel-1</a></li>
    <li><a href="#panel-1">panel-2</a></li>
    <li><a href="#panel-1">panel-3</a></li>
  </ul>
  <div class="panel">
    <h3>panel-1</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-2</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-3</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
</div>

<h3>右にメニューがあるパターン</h3>
<p>コンテンツ量を気にしなくていいので楽。メニューが増えても耐えられるようになる。但しローカルナビなどが右にくると、ナビゲーションが右によるのでうざくなる。</p>
<div id="right" class="switcher right">
  <ul class="nav">
    <li><a href="#panel-1">panel-1</a></li>
    <li><a href="#panel-1">panel-2</a></li>
    <li><a href="#panel-1">panel-3</a></li>
  </ul>
  <div class="panel">
    <h3>panel-1</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-2</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-3</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
</div>

<h3>下にメニューがあるパターン</h3>
<p>コンテンツ量が決まってる場合ぐらいしか使用するケースがほとんどない。</p>
<p>TOPページとかで訴求力の高いバナーを配置する場合に使用するのが然も適していると思う。</p>
<div id="bottom" class="switcher bottom">
  <ul class="nav">
    <li><a href="#panel-1">panel-1</a></li>
    <li><a href="#panel-1">panel-2</a></li>
    <li><a href="#panel-1">panel-3</a></li>
  </ul>
  <div class="panel">
    <h3>panel-1</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-2</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
  <div class="panel">
    <h3>panel-3</h3>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
    <p>panel-contents. content switcher. panel-contents. content switcher. panel-contents. content switcher. </p>
  </div>
</div>

コンテンツを切り替えるやつの基本的なビジュアルパターン

@charset "utf-8";

/* Default Element Styles
----------------------------*/
body {
  font-family: Sylfaen, Georgia, "Times New Roman", serif;
  font-size: 62.5%;
  margin: 0px;
  padding: 0px;
}

h3 {
  font-size: 1.6em;
  text-transform: capitalize;
  margin-bottom: 5px;
  line-height: 140%;
}

/* Swithcer Common Styles
----------------------------*/
.switcher {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  width: 510px;
  overflow: hidden;
}

.nav {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.nav a {
  background: #333333;
  padding: 5px 15px;
  display: inline-block;
  color: #ffffff;
  text-transform: capitalize;
  text-decoration: none;
}

.nav a:hover,
.nav a.selected {
  background: #2e5678;
}

.panel {
  border: 1px solid #cccccc;
  padding: 5px 15px 15px 15px;
  margin: 0px;
  background: #ffffff;
}

/* Swithcer Tab Styles
----------------------------*/
.switcher.tab .nav {
  overflow: hidden;
}

.switcher.tab .nav li {
  float: left;
  margin-right: 1px;
}

/* Swithcer Left Menu Styles
----------------------------*/
.switcher.left .nav {
  float: left;
  width: 80px;
}

.switcher.left .nav a {
  width: 100%;
}

.switcher.left .panel {
  float: right;
  width: 398px;
}

/* Swithcer Right Menu Styles
----------------------------*/
.switcher.right .nav {
  float: right;
  width: 80px;
}

.switcher.right .nav a {
  width: 100%;
}

.switcher.right .panel {
  float: left;
  width: 398px;
}

/* Swithcer Bottom Styles
----------------------------*/
.switcher.bottom {
    position: relative;
    padding-bottom: 50px;
}

.switcher.bottom .nav {
    overflow: hidden;
    position: absolute;
    top: 167px;
}

.switcher.bottom .nav li {
    float: left;
    margin-right: 1px;
}

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/1FsF/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/holydesign/1FsF" title="コンテンツを切り替えるやつの基本的なビジュアルパターン">コンテンツを切り替えるやつの基本的なビジュアルパターン - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code

コンテンツを切り替えるやつの基本的なビジュアルパターン

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Tags