コンテンツを切り替えるやつの基本的なビジュアルパターン holydesign Follow 2010-08-02 00:37:38 License: MIT License Fork0 Fav0 View614 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 10 lines HTML 130 lines CSS 141 lines コンテンツを切り替えるやつの基本的なビジュアルパターン Switcher MooTools Core 1.2.4 (function($){ new Switcher($("tab")); new Switcher($("left")); new Switcher($("right")); new Switcher($("bottom")); }(document.id)); <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; } (function($){ new Switcher($("tab")); new Switcher($("left")); new Switcher($("right")); new Switcher($("bottom")); }(document.id)); <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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> Mootools,tab,ui,css Tweet twitter Tags Mootools,tab,ui,css