Difference between revisions of "Team:USTC-Software/Header2"
| (9 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
href="https://2019.igem.org/Template:USTC-Software/css/common?action=raw&ctype=text/css" /> | href="https://2019.igem.org/Template:USTC-Software/css/common?action=raw&ctype=text/css" /> | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | .header {width: 100%} | + | .header {width: 100%; margin-top: 1em; } |
.top_menu {display: flex} | .top_menu {display: flex} | ||
.logo {padding: 1em} | .logo {padding: 1em} | ||
| Line 24: | Line 24: | ||
.menu_icon {display: block; position: absolute; right: 1em} | .menu_icon {display: block; position: absolute; right: 1em} | ||
} | } | ||
| − | .info_menu_item {font-size: .9em; width: 130px; position: absolute; display: block; border: 1px solid #dddddd; border-radius: 3px; visibility: hidden;opacity: 0; transition: all . | + | .info_menu_item {font-size: .9em; width: 130px; position: absolute; display: block; border: 1px solid #dddddd; border-radius: 3px; visibility: hidden;opacity: 0; transition: all .8s; } |
| − | .info_menu_item ul {display: flex; flex-direction: column; align-items: center;} | + | .info_menu_item ul {display: flex; flex-direction: column; align-items: center; z-index: 1000;} |
.info_menu_item li {padding: .3em} | .info_menu_item li {padding: .3em} | ||
.info_menu_item li a {color: #248ea9} | .info_menu_item li a {color: #248ea9} | ||
.info_menu_item li a:hover {color: #ffd24a} | .info_menu_item li a:hover {color: #ffd24a} | ||
| − | .team_menu > .info_menu_item {left: -1. | + | .team_menu > .info_menu_item {left: -1.6em} |
| − | .project_menu > .info_menu_item {left: - | + | .project_menu > .info_menu_item {left: -1.1em} |
.parts_menu > .info_menu_item {left: -1.2em} | .parts_menu > .info_menu_item {left: -1.2em} | ||
.human_practice_menu > .info_menu_item {left: 1.5em} | .human_practice_menu > .info_menu_item {left: 1.5em} | ||
.awards_menu > .info_menu_item {left: -0.8em} | .awards_menu > .info_menu_item {left: -0.8em} | ||
| − | .more:hover > .info_menu_item {display: block; opacity: 1; visibility: visible;} | + | .more:hover > .info_menu_item {display: block; opacity: 1; visibility: visible; z-index: 1000; background-color: rgba(255, 255, 255, 1);} |
.slide_menu {display: none; background-color: #2196F3; width: 100%;} | .slide_menu {display: none; background-color: #2196F3; width: 100%;} | ||
| − | .slide_menu_item > li > | + | .slide_menu_item > li > span {display: inline-block; width: 1em; height: 1em; background-image: url(https://static.igem.org/mediawiki/2019/f/f4/T--USTC-Software--Slide_down_white.svg); background-position: center; background-size: cover; transition: all .3s; transform: rotate(-90deg);} |
.slide_menu_item > li {text-align: center; padding: .2em; color: aliceblue; } | .slide_menu_item > li {text-align: center; padding: .2em; color: aliceblue; } | ||
.slide_menu_item > li:hover { color: aqua; cursor: pointer;} | .slide_menu_item > li:hover { color: aqua; cursor: pointer;} | ||
| Line 116: | Line 116: | ||
<div class="slide_menu" id="slide_menu"> | <div class="slide_menu" id="slide_menu"> | ||
<ul class="slide_menu_item"> | <ul class="slide_menu_item"> | ||
| − | <li class="slide_team_menu more">TEAM< | + | <li class="slide_team_menu more">TEAM<span></span> |
<div class="slide_info" id="team_menu_item"> | <div class="slide_info" id="team_menu_item"> | ||
<ul> | <ul> | ||
| Line 124: | Line 124: | ||
</div> | </div> | ||
</li> | </li> | ||
| − | <li class="slide_project_menu more">PROJECT< | + | <li class="slide_project_menu more">PROJECT<span></span> |
<div class="slide_info" id="project_menu_item"> | <div class="slide_info" id="project_menu_item"> | ||
<ul> | <ul> | ||
| Line 139: | Line 139: | ||
</div> | </div> | ||
</li> | </li> | ||
| − | <li class="slide_parts_menu more">PARTS< | + | <li class="slide_parts_menu more">PARTS<span></span> |
<div class="slide_info" id="parts_menu_item"> | <div class="slide_info" id="parts_menu_item"> | ||
<ul> | <ul> | ||
| Line 150: | Line 150: | ||
</li> | </li> | ||
<li>SAFETY</li> | <li>SAFETY</li> | ||
| − | <li class="slide_human_practice_menu more">HUMAN PRACTICE< | + | <li class="slide_human_practice_menu more">HUMAN PRACTICE<span></span> |
<div class="slide_info" id="human_practice_menu_item"> | <div class="slide_info" id="human_practice_menu_item"> | ||
<ul> | <ul> | ||
| Line 158: | Line 158: | ||
</div> | </div> | ||
</li> | </li> | ||
| − | <li class="slide_awards_menu more">AWARDS< | + | <li class="slide_awards_menu more">AWARDS<span></span> |
<div class="slide_info" id="awards_menu_item"> | <div class="slide_info" id="awards_menu_item"> | ||
<ul> | <ul> | ||
Latest revision as of 12:26, 3 October 2019