Template:Team:SCUT-China/mainhead
From 2014.igem.org
(Difference between revisions)
Line 128: | Line 128: | ||
} | } | ||
/* end menu (edit, page ...) */ | /* end menu (edit, page ...) */ | ||
+ | |||
+ | #header{position:absolute;top:2px;left:0px;width:100%;height:48px;z-index:1000;} | ||
+ | #header img{position:absolute;left:-1px;width:100%;height:48px;} | ||
+ | .menubar{position:absolute;top:0px;width:100%;width:100%;height:48px;font-size:20px;font-family:Calibri;text-align:center;z- index:1000;color:white;} | ||
+ | .menubar a{text-decoration:none;opacity:1;color:white;} | ||
+ | .menubar a:hover{text-decoration:underline;} | ||
+ | .menubar ul{list-style:none;margin-top:0px;} | ||
+ | .menubar ul > li{float:left;width:150px;cursor:pointer;line-height:48px;height:48px;} | ||
+ | .menubar ul > li > ul{margin-left:0px;margin-top:-4px;display:none;height:200px;width:120px;} | ||
+ | .menubar ul > li:hover > ul{display:block;} | ||
+ | .menubar ul > li > ul > li{margin-left:0px;width:160px;line-height:40px;background-color:white;color:black;} | ||
+ | .menubar ul > li > ul > li:hover{opacity:0.8;border-bottom:4px solid #61d5c8;} | ||
+ | .yes{border-top:4px solid #61d5c8;} | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
+ | <div id="header"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/e/e5/Menubar.png"> | ||
+ | <div class="menubar"> | ||
+ | <ul> | ||
+ | <li style="margin-left:109px;" class="dianji"><a href="https://2014.igem.org/Team:SCUT-China">Home</a></li> | ||
+ | <li class="dianji yes">Team | ||
+ | <ul style="height:120px;"> | ||
+ | <li>Members</li> | ||
+ | <li>Notebook</li> | ||
+ | <li>Attributions</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dianji">Project | ||
+ | <ul > | ||
+ | <li>Overview</li> | ||
+ | <li>Background</li> | ||
+ | <li>Design</li> | ||
+ | <li>Results</li> | ||
+ | <li>Future work</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dianji">Model | ||
+ | <ul style="height:80px;"> | ||
+ | <li>Parts</li> | ||
+ | <li>Juding</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dianji">Data Page | ||
+ | <ul style="height:80px;"> | ||
+ | <li>Overview</li> | ||
+ | <li>Biology</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dianji">Human practice | ||
+ | <ul> | ||
+ | <li >Survey</li> | ||
+ | <li>Visit and interview</li> | ||
+ | <li>Practical analysis</li> | ||
+ | <li >Team communication</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dianji">Safety</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $(".dianji").mouseover(function(){ | ||
+ | $(this).css({"borderTop":"4px solid #61d5c8"}); | ||
+ | $(this).siblings(".dianji").css({"border":"none"}); | ||
+ | }); | ||
+ | $(".dianji").mouseout(function(){ | ||
+ | $(this).css({"border":"none"}); | ||
+ | $(".yes").css({"borderTop":"4px solid #61d5c8"}); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 00:26, 10 October 2014