Team:KIT-Kyoto/Template/header
From 2012.igem.org
(Difference between revisions)
m |
m |
||
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(){ // イベント用のメソッドです。要素をクリックすることでイベント処理が行われます | |
- | <style type="text/css"> | + | $("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:#B9DDE8; | |
- | + | cursor:pointer; | |
} | } | ||
- | + | ul.navi{ | |
- | + | width: 220px; | |
- | + | margin: 0px; | |
- | + | background: #e5f8ff; | |
- | + | ||
} | } | ||
- | + | 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: #B9DDE8; |
} | } | ||
- | + | ul.menu a { | |
- | + | display: block; | |
- | + | height: 35px; | |
- | + | line-height: 35px; | |
+ | color: #5c6e74; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
- | |||
- | |||
</head> | </head> | ||
<body> | <body> | ||
- | < | + | <div> |
- | + | <ul class="navi"> | |
- | < | + | <li> |
- | + | <div class="category">Lab Note</div> | |
- | <div | + | <ul class="menu"> |
- | <div | + | <li><a href="#">Week1</a></li> |
- | <ul | + | <li><a href="#">Week2</a></li> |
- | + | <li><a href="#">Week3</a></li> | |
- | <a href=" | + | <li><a href="#">Week4</a></li> |
- | </li> | + | <li><a href="#">Week5</a></li> |
- | <li | + | <li><a href="#">Week6</a></li> |
- | <a href="">< | + | </ul> |
- | + | </li> | |
- | <li><a href=" | + | <li> |
- | <li><a href=" | + | <div class="category">Protocol</div> |
- | <li><a href=" | + | <ul class="menu"> |
- | <li><a href=" | + | <li><a href="#">本</a></li> |
- | </ul> | + | <li><a href="#">洋書</a></li> |
- | </li> | + | <li><a href="#">マンガ</a></li> |
- | <li | + | <li><a href="#">雑誌</a></li> |
- | < | + | <li><a href="#">古本</a></li> |
- | <ul class=" | + | </ul> |
- | <li><a href=""> | + | </li> |
- | <li><a href=""> | + | <li> |
- | <li><a href=""> | + | <div class="category">Meeting</div> |
- | < | + | <ul class="menu"> |
- | + | <li><a href="#">MAY</a></li> | |
- | + | <li><a href="#">JUNE</a></li> | |
- | <a href=" | + | <li><a href="#">JULY</a></li> |
- | </li> | + | <li><a href="#">AUGUST</a></li> |
- | <li | + | <li><a href="#">SEPTEMBER</a></li> |
- | <a href=" | + | </ul> |
- | <ul | + | </li> |
- | <li>< | + | <li> |
- | <li><a href=""> | + | <div class="category">Design</div> |
- | <li><a href=""> | + | </li> |
- | <li><a href=" | + | </ul> |
- | < | + | |
- | + | ||
- | + | ||
- | <a href=" | + | |
- | </li> | + | |
- | <li | + | |
- | <a href=" | + | |
- | </li> | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </li> | + | |
- | </ul> | + | |
</div> | </div> | ||
- | </ | + | </body> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | </html> |
Revision as of 14:29, 24 August 2012