Team:KIT-Kyoto/Template/header
From 2012.igem.org
(Difference between revisions)
m |
m |
||
(34 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | + | <meta charset="UTF-8"> | |
- | <meta | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
- | < | + | <script type="text/javascript"> |
- | + | $(function(){ | |
- | </ | + | $("ul.menu").hide(); // .要素を[処理時間]かけて非表示にします |
+ | $("div.category").click(function(){ // イベント用のメソッドです。要素をクリックすることでイベント処理が行われます | ||
+ | $("ul.menu").slideUp();// 要素を処理時間でスライドアップします | ||
+ | if($("+ul",this).css("display")=="none"){// ul要素(カテゴリー内のメニュー)カテゴリー内のメニューが表示されていないとき、メニューがsildeDownします | ||
+ | $("+ul",this).slideDown();// 要素を処理時間でスライドダウンします | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <style type="text/css"> | ||
+ | /*色*/ | ||
+ | body { | ||
+ | font-family: Myriad, Helvetica, Arial, "Meiryo", "メイリオ", sans-serif; | ||
+ | _font-family: 'MS Pゴシック', sans-serif; | ||
+ | } | ||
+ | div.category { | ||
+ | margin:-top:5px; | ||
+ | height:40px; | ||
+ | line-height:40px; | ||
+ | background:#fdeff2; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | ul.navi{ | ||
+ | width: 150px; | ||
+ | margin: 0px; | ||
+ | background:#e6cde3; | ||
+ | } | ||
+ | ul.navi, ul.menu { | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | ul.menu li{ | ||
+ | padding-left:20px; | ||
+ | margin:0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | div.category { | ||
+ | margin-top: 5px; | ||
+ | padding-left: 20px; | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | background:#f09199; | ||
+ | } | ||
+ | ul.menu a { | ||
+ | display: block; | ||
+ | height: 35px; | ||
+ | line-height: 35px; | ||
+ | color:#fdeff2; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
- | < | + | <body> |
<div> | <div> | ||
- | <ul | + | <ul class="navi"> |
- | + | <li> | |
- | <li><a href=" | + | <div class="category">Lab Note</div> |
- | </li> | + | <ul class="menu"> |
- | + | <li><a href="#">Week1</a></li> | |
- | <li><a href=" | + | <li><a href="#">Week2</a></li> |
- | + | <li><a href="#">Week3</a></li> | |
- | + | <li><a href="#">Week4</a></li> | |
- | + | <li><a href="#">Week5</a></li> | |
- | + | <li><a href="#">Week6</a></li> | |
- | <li><a href=""> | + | </ul> |
+ | </li> | ||
+ | <li> | ||
+ | <div class="category">Protocol</div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="category">Meeting</div> | ||
+ | <ul class="menu"> | ||
+ | <li><a href="#">MAY</a></li> | ||
+ | <li><a href="#">JUNE</a></li> | ||
+ | <li><a href="#">JULY</a></li> | ||
+ | <li><a href="#">AUGUST</a></li> | ||
+ | <li><a href="#">SEPTEMBER</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="category">Design</div> | ||
+ | </li> | ||
</ul> | </ul> | ||
- | </ | + | </div> |
+ | </body> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Latest revision as of 14:07, 25 August 2012