|
|
(6 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| + | {{Template:KIT-Kyoto/menu}} |
- | | + | <table border=0 width="965px" align="center"><tr><td> |
- | | + | [[Team:KIT-Kyoto|Home]] > [[Team:KIT-Kyoto/Note|Notebook]] > [[Team:KIT-Kyoto/Notebook|Lab Note]] > [[Team:KIT-Kyoto/Notebook-week8|Week8]]</td></tr></table> |
- | <head>
| + | <table border=0 width="965px" align="center"><tr><td width="165px" valign="top" align="left"><div>{{Template:KIT-Kyoto/menu1}} |
- | | + | </div></td><td width="800px" valign="top" align="left"><div id="MIGI"> |
- | <script type="text/javascript" src="jquery.js"></script>
| + | {{Template:KIT-Kyoto/Labdaily}} |
- | <script type="text/javascript" src="ddaccordion.js">
| + | {{Template:KIT-Kyoto-week11}} |
- | /***********************************************
| + | </div></td></tr></table> |
- | * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
| + | {{Template:KIT-Kyoto-1}} |
- | * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
| + | |
- | * This notice must stay intact for legal use
| + | |
- | ***********************************************/
| + | |
- | </script>
| + | |
- | <script type="text/javascript" src="wrapscroll.js"></script>
| + | |
- | | + | |
- | <script type="text/javascript"><!--
| + | |
- | ddaccordion.init({
| + | |
- | headerclass: "expandable",
| + | |
- | contentclass: "categoryitems",
| + | |
- | collapseprev: true,
| + | |
- | defaultexpanded: [0],
| + | |
- | animatedefault: false,
| + | |
- | persiststate: true,
| + | |
- | toggleclass: ["", "openheader"],
| + | |
- | togglehtml: ["suffix", "<img src='image/plus.gif' class='statusicon' />", "<img src='image/minus.gif' class='statusicon' />"],
| + | |
- | animatespeed: "normal"
| + | |
- | })
| + | |
- | // wrapScroll
| + | |
- | var mov = new wrapScroll('accordion_menu','container','header');
| + | |
- | mov.marginTop = 5; //上からのマージンを指定(px)
| + | |
- | //--></script>
| + | |
- | | + | |
- | | + | |
- |
| + | |
- |
| + | |
- | <style type="text/css">
| + | |
- | /* ▼ アコーディオンメニュー ▼ */
| + | |
- | #accordion_menu{
| + | |
- | width: 180px; /*width of accordion menu*/
| + | |
- | background-color:#fff;
| + | |
- | letter-spacing:1px;
| + | |
- | margin:5px 10px;
| + | |
- | } | + | |
- | /* アコーディオンのカテゴリの指定 */
| + | |
- | #accordion_menu .menuheader{
| + | |
- | background-image: url(image/bg_menu.jpg);
| + | |
- | background-repeat: no-repeat;
| + | |
- | height:32px;
| + | |
- | margin-bottom: 3px;
| + | |
- | text-decoration: none;
| + | |
- | line-height: 32px;
| + | |
- | font-size: 16px;
| + | |
- | font-weight:bold;
| + | |
- | text-indent: 1.4em;
| + | |
- | color: #000;
| + | |
- | cursor: hand;
| + | |
- | cursor: pointer;
| + | |
- | /* ステータスアイコンを使用する場合 以下の2行が必要です。使用しない場合は削除しても構いません。 */
| + | |
- | display: block;
| + | |
- | position: relative;
| + | |
- | } | + | |
- | #accordion_menu .menuheader:hover{
| + | |
- | color: #FF0;
| + | |
- | }
| + | |
- | /* openheader はカテゴリが開いている状態のCSS */
| + | |
- | #accordion_menu .openheader{
| + | |
- | background-image: url(image/bg_menu.jpg);
| + | |
- | background-position: 0 -32px;
| + | |
- | background-repeat: no-repeat;
| + | |
- | color: #FFFFFF;
| + | |
- | }
| + | |
- | /* 子メニューの指定 */
| + | |
- | #accordion_menu div.categoryitems ul{
| + | |
- | list-style-type: none;
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
| + | |
- | }
| + | |
- | /*ステータスアイコンのCSS*/
| + | |
- | #accordion_menu div.menuheader .statusicon{
| + | |
- | position: absolute;
| + | |
- | top: 10px;
| + | |
- | left: 5px;
| + | |
- | border: none;
| + | |
- | }
| + | |
- | #accordion_menu div.categoryitems ul li{
| + | |
- | padding-bottom: 2px;
| + | |
- | }
| + | |
- | #accordion_menu div.categoryitems ul li a{
| + | |
- | color: #A70303;
| + | |
- | background: url(image/arrow.png) no-repeat 2px 5px;
| + | |
- | display: block;
| + | |
- | padding: 2px 0;
| + | |
- | padding-left: 19px;
| + | |
- | text-decoration: none;
| + | |
- | border-bottom: 1px solid #dadada;
| + | |
- | font-size: 14px;
| + | |
- | font-weight: bold;
| + | |
- | }
| + | |
- | #accordion_menu div.categoryitems ul li a:visited{
| + | |
- | color: #A70303;
| + | |
- | }
| + | |
- | #accordion_menu div.categoryitems ul li a:hover{
| + | |
- | color: #A70303;
| + | |
- | background-color: #eee;
| + | |
- | }
| + | |
- | /* ▲ アコーディオンメニュー ▲ ここまで */
| + | |
- | </style>
| + | |
- | | + | |
- | | + | |
- | <div id="accordion_menu">
| + | |
- | <a href="http://sawa-s.com/"><div class="menuheader">HOME</div></a>
| + | |
- | <div class="menuheader expandable">カテゴリ 1</div>
| + | |
- | <div class="categoryitems">
| + | |
- | <ul>
| + | |
- | <li><a href="#">MENU 1-1</a></li>
| + | |
- | <li><a href="#">MENU 1-2</a></li>
| + | |
- | <li><a href="#">MENU 1-3</a></li>
| + | |
- | <li><a href="#">MENU 1-4</a></li>
| + | |
- | <li><a href="#">MENU 1-5</a></li>
| + | |
- | <li><a href="#">MENU 1-6</a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <div class="menuheader expandable">カテゴリ 2</div>
| + | |
- | <div class="categoryitems">
| + | |
- | <ul>
| + | |
- | <li><a href="#">MENU 2-1</a></li>
| + | |
- | <li><a href="#">MENU 2-2</a></li>
| + | |
- | <li><a href="#">MENU 2-3</a></li>
| + | |
- | <li><a href="#">MENU 2-4</a></li>
| + | |
- | <li><a href="#">MENU 2-5</a></li>
| + | |
- | <li><a href="#">MENU 2-6</a></li>
| + | |
- | <li><a href="#">MENU 2-7</a></li>
| + | |
- | </ul>
| + | |
- | </div> | + | |
- | | + | |
- | <div class="menuheader expandable">カテゴリ 3</div>
| + | |
- | <div class="categoryitems"> | + | |
- | <ul>
| + | |
- | <li><a href="#">MENU 3-1</a></li>
| + | |
- | <li><a href="#">MENU 3-2</a></li>
| + | |
- | <li><a href="#">MENU 3-3</a></li>
| + | |
- | <li><a href="#">MENU 3-4</a></li>
| + | |
- | </ul>
| + | |
- | <div style="text-align:center;padding:5px;"><img src="image/akafuji.jpg" width="150" /></div>
| + | |
- | <div style="padding:5px;font-size:11px;">メニュー内に写真を表示する事も可能です。</div>
| + | |
- | </div> | + | |
- | | + | |
- | <div class="menuheader expandable">サンプル</div>
| + | |
- | <div class="categoryitems">
| + | |
- | <ul>
| + | |
- | <li><a href="collapseprev.html">複数のカテゴリを開く</a></li>
| + | |
- | <li><a href="defaultexpanded.html">開くカテゴリを固定</a></li>
| + | |
- | <li><a href="animatedefault.html">ロード後にアニメーションで開く</a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | | + | |
- | <div class="menuheader" style="cursor: default">Always Displays</div>
| + | |
- | <div style="padding:5px;font-size:11px;">
| + | |
- | 常に表示しておきたいテキスト・メールアドレス・カウンターなどをここに書く事が出来ます。<br />画像の挿入、リンクの設定、スタイルの指定も可能です。
| + | |
- | </div>
| + | |
- | | + | |
- | <!-- / #accordion_menu --></div>
| + | |
- | </body>
| + | |
- | </html>
| + | |