Difference between revisions of "Team:Jilin China/Navbar CSS"
| (20 intermediate revisions by the same user not shown) | |||
| Line 32: | Line 32: | ||
.navcontent{ | .navcontent{ | ||
width:100%; | width:100%; | ||
| − | min-width: | + | min-width: 1 080px; |
box-sizing: border-box; | box-sizing: border-box; | ||
| − | padding: 0 | + | padding: 0 4.5vw 0 6.5vw; |
margin:0 auto; | margin:0 auto; | ||
} | } | ||
| Line 89: | Line 89: | ||
height: 3rem; | height: 3rem; | ||
line-height: 3rem; | line-height: 3rem; | ||
| − | text-align: | + | text-align: right; |
border: 0px solid purple; | border: 0px solid purple; | ||
margin: 0 auto; | margin: 0 auto; | ||
| Line 97: | 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 103: | 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: 3. | + | height: 3.2rem; |
width: 9rem; | width: 9rem; | ||
float: left; | float: left; | ||
| Line 115: | Line 144: | ||
} | } | ||
| − | /*滚动后navbar样式* | + | /*滚动后navbar样式*/ |
| − | .navbar_scrolled{ | + | .navbar.navbar_scrolled{ |
height:3rem; | height:3rem; | ||
background:rgba(255,255,255,1); | background:rgba(255,255,255,1); | ||
box-shadow:0 0 2rem rgba(0,0,0,0.1); | box-shadow:0 0 2rem rgba(0,0,0,0.1); | ||
} | } | ||
| − | .navbar_scrolled ul a{ | + | .navbar.navbar_scrolled ul a{ |
height:3rem; | height:3rem; | ||
} | } | ||
| − | .navbar_scrolled .navbottom li a { | + | .navbar.navbar_scrolled .navbottom li a { |
color:black; | color:black; | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | .navbar_scrolled ul li > a{ | + | .navbar.navbar_scrolled ul li > a{ |
line-height:3rem; | line-height:3rem; | ||
} | } | ||
| − | .navbar_scrolled ul > li{ | + | .navbar.navbar_scrolled ul > li{ |
height:3rem; | height:3rem; | ||
} | } | ||
| − | .navbar_scrolled .logo{ | + | .navbar.navbar_scrolled .logo{ |
height:0 | height:0 | ||
} | } | ||
| Line 215: | Line 242: | ||
display: none; | display: none; | ||
z-index: 99999; | z-index: 99999; | ||
| + | pointer-events: none; | ||
} | } | ||
.title_nav h2{ | .title_nav h2{ | ||
| Line 269: | Line 297: | ||
.navbar ul li{ | .navbar ul li{ | ||
list-style-type:none; | list-style-type:none; | ||
| − | + | height: 100%; | |
width: 100%; | width: 100%; | ||
min-height: 3rem; | min-height: 3rem; | ||
| Line 305: | Line 333: | ||
} | } | ||
.navbar ul li ul li{ | .navbar ul li ul li{ | ||
| − | |||
line-height: 3rem; | line-height: 3rem; | ||
min-height: 3rem; | min-height: 3rem; | ||
| Line 311: | 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; | ||
Latest revision as of 17:27, 17 October 2018