Gracetexana (Talk | contribs) |
|||
(139 intermediate revisions by 2 users not shown) | |||
Line 10: | Line 10: | ||
/********************************* MENU ********************************/ | /********************************* MENU ********************************/ | ||
− | + | ||
+ | /*********************new menu formatting*******************/ | ||
+ | |||
+ | .menu-wrap { | ||
+ | width:100%; | ||
+ | background:#FFF; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .menu { | ||
+ | margin-top:-6px; | ||
+ | padding:0; | ||
+ | position: fixed; | ||
+ | z-index:1; | ||
+ | left: 0px; | ||
+ | width:100%; | ||
+ | background:#FFF; | ||
+ | } | ||
+ | |||
+ | .menu li { | ||
+ | margin:0px; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | .menu a { | ||
+ | transition:all linear 0.15s; | ||
+ | padding:10px; | ||
+ | color:#BDBDBD; | ||
+ | } | ||
+ | |||
+ | .menu li:hover > a, .menu .current-item > a { | ||
+ | text-decoration:none; | ||
+ | color:#000000; | ||
+ | } | ||
+ | |||
+ | .menu .arrow { | ||
+ | font-size:11px; | ||
+ | line-height:0%; | ||
+ | } | ||
+ | |||
+ | /*----- Top Level -----*/ | ||
+ | menu > ul { | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | |||
+ | .menu > ul > li { | ||
+ | margin-top:-5px; | ||
+ | float:left; | ||
+ | display:inline-block; | ||
+ | position:relative; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li > a { | ||
+ | display: inline-block; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li:hover > a, .menu > ul > .current-item > a { | ||
+ | background:#DF7F3E; | ||
+ | } | ||
+ | |||
+ | /*----- Bottom Level -----*/ | ||
+ | .menu li:hover ul { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .sub-menu { | ||
+ | width:200%; | ||
+ | padding:0px 0px; | ||
+ | position:absolute; | ||
+ | top:90%; | ||
+ | left:0px; | ||
+ | transition:opacity linear 0.15s; | ||
+ | box-shadow:0px 2px 3px rgba(0,0,0,0.2); | ||
+ | background:#2e2728; | ||
+ | display:none; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .sub-menu li { | ||
+ | display:block; | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a { | ||
+ | padding:10px 10px; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .sub-menu li a:hover, .sub-menu .current-item a { | ||
+ | text-color:#000000; | ||
+ | background:#DF7F3E; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Wrapper for the menu */ | ||
.menu_wrapper { | .menu_wrapper { | ||
width:100%; | width:100%; | ||
margin-top:-10px; | margin-top:-10px; | ||
− | margin-left:-20px; | + | margin-left:-20px; |
+ | height:0px; | ||
position:fixed; | position:fixed; | ||
padding:0px; | padding:0px; | ||
− | display: | + | display:inline; |
− | + | ||
list-style: none; | list-style: none; | ||
− | + | box-shadow:0px 1px 3px rgba(0,0,0,0.2); | |
} | } | ||
+ | |||
/* styling for the menu items */ | /* styling for the menu items */ | ||
.menu_item { | .menu_item { | ||
+ | background-color:#f2f2f2; | ||
width:11%; | width:11%; | ||
float:left; | float:left; | ||
margin:0px 0px 0px 0px; | margin:0px 0px 0px 0px; | ||
padding-top: 10px; | padding-top: 10px; | ||
− | padding- | + | padding-bottom: 10px; |
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
font-weight:bold; | font-weight:bold; | ||
Line 74: | Line 175: | ||
width:100%; | width:100%; | ||
margin-top: 0px; | margin-top: 0px; | ||
− | padding: | + | padding: 0px 0px 0px 0px ; |
display:block; | display:block; | ||
− | border-bottom: 1px solid #d3d3d3 | + | border-bottom: 1px solid #d3d3d3 |
− | + | ||
font-weight:bold; | font-weight:bold; | ||
text-decoration:none; | text-decoration:none; | ||
color:#000000; | color:#000000; | ||
+ | text-align:left; | ||
list-style-type:none; | list-style-type:none; | ||
cursor:pointer; | cursor:pointer; | ||
Line 138: | Line 239: | ||
color:#000000; | color:#000000; | ||
} | } | ||
− | |||
− | |||
.submenu li a:hover { | .submenu li a:hover { | ||
Line 177: | Line 276: | ||
margin-left: 0px; | margin-left: 0px; | ||
margin-right: 0px; | margin-right: 0px; | ||
− | margin-top: | + | margin-top: 25px; |
padding: 0px 0px; | padding: 0px 0px; | ||
float: left; | float: left; | ||
Line 185: | Line 284: | ||
.column { | .column { | ||
width: 100%; | width: 100%; | ||
− | + | margin-left: auto ; | |
− | margin-top: | + | margin-right: auto ; |
+ | margin-top: 20px; | ||
} | } | ||
− | + | .full_size{ | |
width:80%; | width:80%; | ||
− | + | } | |
+ | |||
+ | .full_size_outer{ | ||
+ | width:80%; | ||
+ | background: rgba(255, 255, 255, .70); | ||
+ | } | ||
+ | |||
+ | /* only use inside .full_size_outer */ | ||
+ | .full_size_inner{ | ||
+ | width:100%; | ||
} | } | ||
Line 198: | Line 307: | ||
width: 100%; | width: 100%; | ||
} | } | ||
+ | |||
+ | .seventh_size { | ||
+ | width: 14.28%; | ||
+ | text-align: center; | ||
+ | float:left; | ||
+ | } | ||
.sixth_size{ | .sixth_size{ | ||
− | width: | + | width: 16.66%; |
text-align: center; | text-align: center; | ||
− | float: | + | float:left; |
} | } | ||
+ | .fifth_size { | ||
+ | width: 20%; | ||
+ | text-align:center; | ||
+ | float:left; | ||
+ | } | ||
.half_size { | .half_size { | ||
width: 50%; | width: 50%; | ||
+ | float:left; | ||
} | } | ||
.half_size img { | .half_size img { | ||
Line 233: | Line 354: | ||
} | } | ||
+ | |||
/*STYLING */ | /*STYLING */ | ||
Line 270: | Line 392: | ||
/* font and text */ | /* font and text */ | ||
.content_wrapper p { | .content_wrapper p { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
font-family:'Calisto MT', serif; | font-family:'Calisto MT', serif; | ||
} | } | ||
Line 297: | Line 419: | ||
/* non numbered lists */ | /* non numbered lists */ | ||
.content_wrapper ul { | .content_wrapper ul { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
font-family:'Calisto MT', serif; | font-family:'Calisto MT', serif; | ||
} | } | ||
Line 304: | Line 426: | ||
/* numbered lists */ | /* numbered lists */ | ||
.content_wrapper ol { | .content_wrapper ol { | ||
− | padding: | + | padding:1px 15px; |
− | font-size: | + | font-size: 17px; |
font-family:'Calisto MT', serif; | font-family:'Calisto MT', serif; | ||
} | } | ||
Line 356: | Line 478: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/********************************* RESPONSIVE STYLING ********************************/ | /********************************* RESPONSIVE STYLING ********************************/ | ||
Line 404: | Line 517: | ||
<!-- This tells the browser that your page is responsive --> | <!-- This tells the browser that your page is responsive --> | ||
− | <div class=" | + | <div class="menu_wrap" > |
+ | <nav class="menu"> | ||
+ | <ul class="clearfix"> | ||
+ | <li> <a href="https://2016.igem.org/Team:Austin_UTexas">HOME </a> </li> | ||
− | |||
− | + | <li> <a href="">TEAM <span class="arrow">▼</span></a> | |
− | + | <ul class="sub-menu"> | |
− | <li | + | |
− | + | ||
− | + | ||
− | + | ||
− | <ul class=" | + | |
<li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team </a> </li> | <li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team </a> </li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★ Collaborations </a> </li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★ Collaborations </a> </li> | ||
Line 421: | Line 531: | ||
</li> | </li> | ||
− | <li | + | <li> |
− | <ul class=" | + | <a href="">PROJECT <span class="arrow">▼</span></a> |
+ | <ul class="sub-menu"> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★ Description </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★ Description </a></li> | ||
− | |||
− | |||
− | |||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li> | ||
− | |||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | + | <li > <a href="https://2016.igem.org/Team:Austin_UTexas/Parts">PARTS </a></li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <li | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Safety"> SAFETY </a> </li> |
− | <li | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Attributions">★ ATTRIBUTIONS </a></li> |
− | <li | + | <li> <a href=""> HUMAN PRACTICES<span class="arrow">▼</span></a> |
− | <ul class=" | + | <ul class="sub-menu"> |
− | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices </a></li> | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices </a></li> |
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li> | ||
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li> | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li> | ||
− | |||
</ul> | </ul> | ||
</li> | </li> | ||
− | + | <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Interlab Study">INTERLAB STUDY </a> </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
+ | </nav> | ||
</div> | </div> | ||
+ | <div class="content_wrapper"> | ||
− | |||
− | |||
<script> | <script> | ||
Line 545: | Line 630: | ||
</script> | </script> | ||
− | |||
− | |||
</html> | </html> |
Latest revision as of 21:46, 19 October 2016