Difference between revisions of "Template:JiangnanU China/CSS"

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
 
+
@font-face {
−
html {
+
    font-family: 'moon';
−
  height: 100%;
+
    src:url("https://static.igem.org/mediawiki/2019/6/61/T--JiangnanU_China--Moon2.0-Regular.otf");
−
  background-color: #f8f8f8;
+
 
}
 
}
 +
h2{
 +
    font-family: moon,sans-serif;
 +
    color: #ffffff;
  
−
body {
 
−
  overflow: hidden;
 
−
  height: 100%;
 
−
  width: 100%;
 
−
  margin: 0 auto;
 
−
  background-color: #ffffff;
 
−
  font-family: 'Roboto', sans-serif;
 
−
  color: #555555;
 
 
}
 
}
−
 
+
body{
−
a {
+
    padding-top: 7px;
−
  text-decoration: none;
+
    float: none;
−
  color: inherit;
+
    margin: 0;
 
}
 
}
−
 
+
.List{
−
* {
+
    margin-right: 100px;
−
  box-sizing: border-box;
+
−
}
+
−
 
+
−
.menu {
+
−
  display: block;
+
−
  position: relative;
+
−
  cursor: pointer;
+
 
}
 
}
−
.menu:hover .menu-dropdown{
+
nav{ width:100%;
−
display: block;
+
    height:100px;
 +
    background-image:url("https://static.igem.org/mediawiki/2019/b/b0/T--JiangnanU_China--Banner_BG.jpg
 +
");
 +
    float: left;
 +
    position: relative;
 
}
 
}
 +
nav ul{list-style:none;z-index: 1;}
 +
nav ul li:hover ul{ display:block}
 +
nav ul li:hover .chosen_bar{ display: block}
 +
nav ul li{ float:right; line-height:40px; text-align:center; position:relative;}
  
−
.menu-title {
+
nav ul li ul{ position:absolute; display:none;background:rgb(0,19,86);padding: 0;margin: 0}
−
  white-space:nowrap;
+
nav ul li ul li{ float:none; line-height:30px; text-align:left; width:100%;}
−
  font-size:18px;  
+
nav ul li ul li:hover{ background-color:#00b2ff;}
−
  display: block;
+
nav ul li ul li a{ width:100%;white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding: 0 15px;}
−
  width:160px;
+
.menu{
−
  height: 40px;
+
    margin-left: 50px;
−
  padding: 12px 0 0;
+
    width: auto;
−
  text-align: center;
+
−
  color: #ffffff;
+
−
  font-weight: bold;
+
−
  text-transform: uppercase;
+
−
  transition: 0.3s background-color;
+
 
}
 
}
−
 
+
.logo{
−
.menu-title:before {
+
    position: absolute;
−
  content: "";
+
    width: 80px;
−
  display: block;
+
    height: 80px;
−
  height: 0;
+
    z-index: 1;
−
  border-top: 5px solid #9BFEF9;
+
    top:10px;
−
  border-left: 75px solid transparent;
+
    left: 28px;
−
  border-right: 75px solid transparent;
+
−
  border-bottom: 0 solid #dddddd;
+
−
  position: absolute;
+
−
  top: 100%;
+
−
  left: 0;
+
−
  z-index: 101;
+
−
  transition: 0.1s 0.1s border-top ease-out, 0.2s border-top-color;
+
 
}
 
}
−
 
+
.logo_text{
−
.menu-title:hover:before {
+
    font-size: 24px;
−
  border-top-color: #8db842;
+
    position: absolute;
 +
    left:126px;
 +
    top:14px;
 +
    color: #ffffff;
 +
    font-family: moon,serif;
 
}
 
}
−
 
+
.decoration1{
−
.menu:hover > .menu-title:before {
+
    width: 40px;
−
  border-top-width: 0;
+
    height: 17px;
−
  transition: 0.1s border-top-width ease-in, 0.3s border-top-color;
+
    position: absolute;
 +
    right:20px;
 +
    top:20px;
 
}
 
}
−
 
+
.decoration1:hover .left{
−
.menu-title:after {
+
    display:inherit;
−
  content: "";
+
−
  display: block;
+
−
  height: 0;
+
−
  border-left: 75px solid transparent;
+
−
  border-right: 75px solid transparent;
+
−
  border-bottom: 0 solid #ebebeb;
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 0;
+
−
  z-index: 101;
+
−
  transition: 0.2s border-bottom ease-in;
+
 
}
 
}
−
 
+
.div1{
−
.menu:hover > .menu-title:after {
+
    position: relative;
−
  border-bottom-width: 5px;
+
    width: inherit;
−
  transition: 0.2s 0.2s border-bottom-width ease-out;
+
 
}
 
}
−
 
+
.chosen_bar{
−
 
+
    top: -10px;
−
.menu-title_2nd:hover {
+
    position: absolute;
−
  background:#C3FBF0;
+
    display: none;
 +
    width:100%;
 +
    height: 10px;
 
}
 
}
 +
/*-----------------Leftnav----------------*/
  
−
.menu-title_2nd:before {
+
.open {
−
  border-top-color: #C3FBF0;
+
    overflow: hidden;
−
}
+
    transform: translateX(0px);
  
−
.menu-title_2nd:hover:before {
+
    width: 346px;
−
  border-top-color: #3e86a3;
+
    height:100%;
 +
    margin-top: 99px;
 +
    border-top-style: solid;
 +
    border-top-width: 1px;
 +
    background-image: url("leftnav_background.png");
 
}
 
}
 +
.left{
 +
    overflow: hidden;
 +
    transform: translateX(-250px);
  
−
 
+
    width: 346px;
−
.menu-title_3rd:hover {
+
    height:100%;
−
  background:#DEF8ED;
+
    margin-top: 99px;
 +
    border-top-style: solid;
 +
    border-top-width: 1px;
 +
    background-image: url("leftnav_background.png");
 
}
 
}
 +
.left ul{list-style: none;margin:0;padding:0;width: 100%}
 +
.left ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
 +
.left ul li:hover ul{display: block}
 +
.left ul li:hover{background: #00b2ff}
  
−
.menu-title_3rd:before {
+
.left ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
−
  border-top-color: #DEF8ED;
+
.left ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
−
}
+
.left ul li ul li:hover{ background-color:#00b2ff;}
 +
.left ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
  
−
.menu-title_3rd:hover:before {
 
−
  border-top-color:#DEF8ED;
 
−
}
 
  
 +
.open ul{list-style: none;margin:0;padding:0;width: 100%}
 +
.open ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
 +
.open ul li:hover ul{display: block}
 +
.open ul li:hover{background: #00b2ff}
  
 +
.open ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
 +
.open ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
 +
.open ul li ul li:hover{ background-color:#00b2ff;}
 +
.open ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
  
−
.menu-dropdown {
 
−
  display: none;
 
−
  min-width: 100%;
 
−
  padding: 15px 0;
 
−
  position: absolute;
 
−
  background: #9BFEF9;
 
−
  z-index: 1;
 
−
  transition: 0.5s padding, 0.5s background;
 
−
}
 
  
−
.menu-dropdown:after {
 
−
  content: "";
 
−
  display: block;
 
−
  height: 0;
 
−
  border-top: 5px solid #ebebeb;
 
−
  border-left: 75px solid transparent;
 
−
  border-right: 75px solid transparent;
 
−
  position: absolute;
 
−
  top: 100%;
 
−
  left: 0;
 
−
  z-index: 101;
 
−
  transition: 0.5s border-top;
 
−
}
 
  
−
.menu:not(:hover) > .menu-dropdown {
+
.icon {
−
  padding: 4px 0;
+
−
  background: #ddddd;
+
−
  z-index: 99;
+
−
}
+
−
 
+
−
.menu:not(:hover) > .menu-dropdown:after {
+
−
  border-top-color: #dddddd;
+
−
}
+
−
 
+
−
.menu:not(:hover) > .menu-title:after {
+
−
  border-bottom-color: #dddddd;
+
−
}
+
−
 
+
−
.menu-dropdown > * {
+
−
  overflow: hidden;
+
−
  height: 30px;
+
−
  padding: 5px 10px;
+
−
  background: transparent;
+
−
  white-space: nowrap;
+
−
  transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s padding cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s margin cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s 0.2s color, 0.2s background-color;
+
−
}
+
−
 
+
−
.menu-dropdown > *:hover {
+
−
  background: rgba(0, 0, 0, 0.2);
+
−
}
+
−
 
+
−
.menu:not(:hover) > .menu-dropdown > * {
+
−
  visibility: hidden;
+
−
  height: 0;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
  margin: 0;
+
−
  color: rgba(25, 25, 25, 0);
+
−
  transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.6s visibility;
+
−
  z-index: 99;
+
−
}
+
−
 
+
−
.hList > * {
+
−
  float: left;
+
−
}
+
−
.hList > * + * {
+
−
  margin-left: 0;
+
−
}
+
−
nav{
+
−
    vertical-align: middle;
+
−
    height: 100px;
+
−
    background: linear-gradient(to left,#FFFFFF,#DCF8EC,#B6FDF2,#9BFEF9);
+
−
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
+
−
    color:#FFFFFF;
+
−
}
+
−
.logo{
+
−
    position: absolute;
+
−
    top: 0px;
+
−
    right: 50px;
+
−
    width: 80px;
+
−
    height: 100px;
+
−
}
+
−
.bottom{
+
 
     position: absolute;
 
     position: absolute;
−
     top: 54px;
+
    width: 36px;
 +
    height: 36px;
 +
    right: 32px;
 +
     top:17px;
 
}
 
}
−
</style>
+
<style>
 
</html>
 
</html>

Latest revision as of 15:16, 15 June 2019