Difference between revisions of "Team:Jilin China/Navbar CSS"

 
(44 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
padding: 0;
 
padding: 0;
 
margin: 0;
 
margin: 0;
−
height: 4rem;
+
height: 3.5rem;
 
width: 100%;
 
width: 100%;
 
border: 0px solid red;
 
border: 0px solid red;
−
/*background: linear-gradient(-27deg,rgba(0,213,255,0.7),rgba(0,149,195,0.7));*/
 
 
background: linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
 
background: linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
 
color: white;
 
color: white;
−
font-size: 18px;
+
font-size: 1.3vw;
 
font-weight: normal;
 
font-weight: normal;
 
box-shadow: 0 0 5px rgba(0,0,0,0);
 
box-shadow: 0 0 5px rgba(0,0,0,0);
Line 33: Line 32:
 
.navcontent{
 
.navcontent{
 
width:100%;
 
width:100%;
−
min-width: 1080px;
+
min-width: 1 080px;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
padding: 0 7.5vw;
+
padding: 0 4.5vw 0 6.5vw;
 
margin:0 auto;
 
margin:0 auto;
 
}
 
}
Line 46: Line 45:
 
.navbar ul a{
 
.navbar ul a{
 
display: block;
 
display: block;
−
width:8rem;
+
width:9vw;
−
height: 4rem;
+
height: 3.5rem;
−
line-height:4rem;
+
line-height:3.5rem;
 
text-align: center;
 
text-align: center;
 
text-decoration: none;
 
text-decoration: none;
Line 56: Line 55:
 
.navbar ul > li{
 
.navbar ul > li{
 
list-style-image:none;
 
list-style-image:none;
−
height: 4rem;
+
height: 3.5rem;
−
width: 8rem;
+
width: 9vw;
 
float: left;
 
float: left;
 
border: 0px solid green;
 
border: 0px solid green;
Line 76: Line 75:
 
padding: 0;
 
padding: 0;
 
margin: 0 auto;
 
margin: 0 auto;
−
width: 8rem;
+
width: 9vw;
 
border: 0px solid red;
 
border: 0px solid red;
 
background: rgba(20,57,93,0.80);
 
background: rgba(20,57,93,0.80);
Line 86: Line 85:
 
.navbar ul li ul li{
 
.navbar ul li ul li{
 
list-style-type: none;
 
list-style-type: none;
−
font-size: 15px;
+
font-size: 12px;
 
width: 100%;
 
width: 100%;
 
height: 3rem;
 
height: 3rem;
 
line-height: 3rem;
 
line-height: 3rem;
−
text-align: center;
+
text-align: right;
 
border: 0px solid purple;
 
border: 0px solid purple;
 
margin: 0 auto;
 
margin: 0 auto;
Line 98: Line 97:
 
}
 
}
 
.navbar ul li ul li:hover {
 
.navbar ul li ul li:hover {
 +
background: rgba(0,0,0,0.50);
 +
border-radius: 0.5rem;
 +
}
 +
.navbar ul li ul li ul{
 +
padding: 0;
 +
margin: 0 auto;
 +
transform: translate(9vw,-3rem);
 +
width: 9vw;
 +
border: 0px solid red;
 +
background: rgba(20,57,93,0.80);
 +
display: none;
 +
border-radius: 0 0.5rem 0.5rem 0.5rem;
 +
box-shadow: 0 0 5px rgba(0,0,0,0.5);
 +
animation-duration: 0.3s;
 +
}
 +
.navbar ul li ul li ul li{
 +
list-style-type: none;
 +
font-size: 12px;
 +
width: 100%;
 +
height: 3rem;
 +
line-height: 3rem;
 +
text-align: right;
 +
border: 0px solid purple;
 +
margin: 0 auto;
 +
}
 +
.navbar ul li ul li ul li a{
 +
line-height: 3rem;
 +
}
 +
.navbar ul li ul li ul li:hover{
 
background: rgba(0,0,0,0.50);
 
background: rgba(0,0,0,0.50);
 
border-radius: 0.5rem;
 
border-radius: 0.5rem;
Line 104: Line 132:
 
.logo {
 
.logo {
 
background: url(https://static.igem.org/mediawiki/2018/f/f8/T--Jilin_China--Navbar--Logo.svg) no-repeat left center;
 
background: url(https://static.igem.org/mediawiki/2018/f/f8/T--Jilin_China--Navbar--Logo.svg) no-repeat left center;
−
height: 4rem;
+
height: 3.2rem;
−
width: 10rem;
+
width: 9rem;
 
float: left;
 
float: left;
 
transition: all 0.3s ease;
 
transition: all 0.3s ease;
−
background-size: auto 1.8rem;
+
background-size: auto 1.5rem;
 
}
 
}
 
.logo a{
 
.logo a{
Line 115: Line 143:
 
height: 100%;
 
height: 100%;
 
}
 
}
 +
 +
/*滚动后navbar样式*/
 +
.navbar.navbar_scrolled{
 +
height:3rem;
 +
background:rgba(255,255,255,1);
 +
box-shadow:0 0 2rem rgba(0,0,0,0.1);
 +
}
 +
.navbar.navbar_scrolled ul a{
 +
height:3rem;
 +
 +
 +
}
 +
.navbar.navbar_scrolled .navbottom li a {
 +
color:black;
 +
 +
 +
}
 +
.navbar.navbar_scrolled ul li > a{
 +
line-height:3rem;
 +
}
 +
.navbar.navbar_scrolled ul > li{
 +
height:3rem;
 +
}
 +
.navbar.navbar_scrolled .logo{
 +
height:0
 +
}
 +
/*End*/
 +
 
.folder{
 
.folder{
 
display: none;
 
display: none;
Line 186: Line 242:
 
display: none;
 
display: none;
 
z-index: 99999;
 
z-index: 99999;
 +
pointer-events: none;
 
}
 
}
 
.title_nav h2{
 
.title_nav h2{
Line 207: Line 264:
 
background: rgba(0,0,0,0.5);
 
background: rgba(0,0,0,0.5);
 
color: white;
 
color: white;
−
font-size: 15px;
+
font-size: 16px;
 
font-weight: normal;
 
font-weight: normal;
 
box-shadow: 0 0 5px rgba(0,0,0,0.1);
 
box-shadow: 0 0 5px rgba(0,0,0,0.1);
Line 240: Line 297:
 
.navbar ul li{
 
.navbar ul li{
 
list-style-type:none;
 
list-style-type:none;
−
heigth: 100%;
+
height: 100%;
 
width: 100%;
 
width: 100%;
 
min-height: 3rem;
 
min-height: 3rem;
Line 273: Line 330:
 
height:auto;
 
height:auto;
 
overflow: hidden;
 
overflow: hidden;
 +
/*transition: all 0.3s ease;*/
 
}
 
}
 
.navbar ul li ul li{
 
.navbar ul li ul li{
−
height: 3rem;
 
 
line-height: 3rem;
 
line-height: 3rem;
 
min-height: 3rem;
 
min-height: 3rem;
Line 281: Line 338:
 
box-sizing: border-box;
 
box-sizing: border-box;
 
font-size: 14px;
 
font-size: 14px;
 +
height: 100%;
 
}
 
}
 
.navbar ul li ul li:last-of-type{
 
.navbar ul li ul li:last-of-type{
 
border-radius: 0;
 
border-radius: 0;
 
}
 
}
 +
 +
.navbar ul li ul li ul{
 +
display:block;
 +
padding: 0;
 +
margin: 0 auto;
 +
width: 100%;
 +
border: 0px solid red;
 +
background: rgba(0,0,0,0.6);
 +
position: relative;
 +
height:auto;
 +
overflow: hidden;
 +
/*transition: all 0.3s ease;*/
 +
}
 +
.navbar ul li ul li ul li{
 +
height: 3rem;
 +
line-height: 3rem;
 +
min-height: 3rem;
 +
padding: 0 1rem;
 +
box-sizing: border-box;
 +
font-size: 14px;
 +
}
 +
.navbar ul li ul li ul li:last-of-type{
 +
border-radius: 0;
 +
}
 +
 
.logo {
 
.logo {
 
height: 3.5rem;
 
height: 3.5rem;
Line 314: Line 397:
 
width: 3.5rem;
 
width: 3.5rem;
 
height: 3.5rem;
 
height: 3.5rem;
−
background: url(https://static.igem.org/mediawiki/2018/7/77/T--Jilin_China--Navbar--Menu.svg) center no-repeat;
+
background: url(https://static.igem.org/mediawiki/2018/1/17/T--Jilin_China--Navbar--Menu.svg) center no-repeat;
 
background-size: 40%;
 
background-size: 40%;
 
position: fixed;
 
position: fixed;
Line 332: Line 415:
 
}
 
}
 
.navbottom .plus{
 
.navbottom .plus{
−
background: url(https://static.igem.org/mediawiki/2018/e/ef/T--Jilin_China--Navbar--Plus.png) no-repeat center;
+
background: url(https://static.igem.org/mediawiki/2018/2/2f/T--Jilin_China--Navbar--Open.svg) no-repeat center;
 
background-size: 40%;
 
background-size: 40%;
 
width: 2.5rem;
 
width: 2.5rem;
Line 339: Line 422:
 
right: 0.6rem;
 
right: 0.6rem;
 
top:0.3rem;
 
top:0.3rem;
 +
transition: transform 0.3s ease;
 +
}
 +
.navbottom input:checked + .plus{
 +
transform: rotate(180deg);
 
}
 
}
 
.sidenav{
 
.sidenav{

Latest revision as of 17:27, 17 October 2018