Template:Tokyo Tech Menu
From 2009.igem.org
(Difference between revisions)
Line 27: | Line 27: | ||
.menu tr td{ | .menu tr td{ | ||
text-align:center; | text-align:center; | ||
+ | position:static; | ||
width:120px; | width:120px; | ||
height:30px; | height:30px; | ||
Line 67: | Line 68: | ||
} | } | ||
.on ul{ | .on ul{ | ||
+ | display:block; | ||
+ | } | ||
+ | #Tokyo_Tech_menu{ | ||
+ | font-size:95%; | ||
+ | list-style-type:none; | ||
+ | width:720px; | ||
+ | height:40px; | ||
+ | position:absolute; | ||
+ | bottom:0; | ||
+ | left:0; | ||
+ | } | ||
+ | #Tokyo_Tech_menu li{ | ||
+ | width:200px; | ||
+ | float:left; | ||
+ | } | ||
+ | #Tokyo_Tech_menu li a:hover{ | ||
+ | text-decoration:none; | ||
+ | background-color:#36c; | ||
+ | color:#fff; | ||
+ | } | ||
+ | #Tokyo_Tech_menu ul{ | ||
+ | list-style-type:none; | ||
+ | width:120px; | ||
+ | height:auto; | ||
+ | position:static; | ||
+ | } | ||
+ | |||
+ | #Tokyo_Tech_menu ul li{ | ||
+ | width:200px; | ||
+ | float:none; | ||
+ | } | ||
+ | |||
+ | #Tokyo_Tech_menu ul li a{ | ||
+ | text-align:left; | ||
+ | text-decoration:none; | ||
+ | width:100px; | ||
+ | height:auto; | ||
+ | display:block; | ||
+ | padding:4px; | ||
+ | border:1px outset#39f; | ||
+ | background-color:#39f; | ||
+ | color:#000; | ||
+ | } | ||
+ | #Tokyo_Tech_menu ul li a:hover{ | ||
+ | text-decoration:none; | ||
+ | border:1px outset#36c; | ||
+ | background-color:#36c; | ||
+ | color:fff; | ||
+ | } | ||
+ | #Tokyo_Tech_menu .menu ul{ | ||
+ | display:none; | ||
+ | } | ||
+ | #Tokyo_Tech_menu .menuOn ul{ | ||
display:block; | display:block; | ||
} | } | ||
Line 97: | Line 151: | ||
</tr> | </tr> | ||
</table> | </table> | ||
+ | <ul id="Tokyo_Tech_menu"> | ||
+ | |||
+ | <!-- カテゴリー 1 --> | ||
+ | <li id="category01" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'"> | ||
+ | <a href="#">カテゴリー 1</a> | ||
+ | <!-- カテゴリー 1 の 子リスト--> | ||
+ | <ul> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <!-- カテゴリー 2 --> | ||
+ | <li id="category02" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'"> | ||
+ | <a href="#">カテゴリー 2</a> | ||
+ | <!-- カテゴリー 2 の 子リスト--> | ||
+ | <ul> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <!-- カテゴリー 3 --> | ||
+ | <li id="category03" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'"> | ||
+ | <a href="#">カテゴリー 3</a> | ||
+ | <!-- カテゴリー 3 の 子リスト--> | ||
+ | <ul> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <!-- カテゴリー 4 --> | ||
+ | <li id="category04" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'"> | ||
+ | <a href="#">カテゴリー 4</a> | ||
+ | <!-- カテゴリー 4 の 子リスト--> | ||
+ | <ul> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | <li><a href="#">子リスト</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 06:06, 19 October 2009
Main |
Team |
Project | Parts |
Conclusion |
Links |