Team:KIT-Kyoto/Template/header
From 2012.igem.org
(Difference between revisions)
m |
m |
||
(39 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html | + | <html> |
- | < | + | <meta charset="UTF-8"> |
- | < | + | <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"> | <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 | + | ul.navi{ |
- | + | width: 150px; | |
- | + | margin: 0px; | |
+ | background:#e6cde3; | ||
} | } | ||
- | + | ul.navi, ul.menu { | |
- | ul | + | padding:0; |
- | + | margin:0; | |
- | + | list-style: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | ul | + | 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; | |
- | ul | + | height: 35px; |
- | + | line-height: 35px; | |
- | + | color:#fdeff2; | |
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div> | ||
+ | <ul class="navi"> | ||
+ | <li> | ||
+ | <div class="category">Lab Note</div> | ||
+ | <ul class="menu"> | ||
+ | <li><a href="#">Week1</a></li> | ||
+ | <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> | ||
+ | </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> | ||
+ | </div> | ||
+ | </body> | ||
- | |||
- | |||
- | |||
</html> | </html> |
Latest revision as of 14:07, 25 August 2012