Team:Jilin China/Navbar CSS

@charset "utf-8";

/* This is a piece of css for navbar */ @media screen and (min-width:1080px){

.navbar{ padding: 0; margin: 0; height: 4rem; width: 100%; border: 0px solid red; background: linear-gradient(-27deg,rgba(0,82,208,0.5),rgba(0,149,195,0.5)); color: white; font-size: 18px; font-weight: normal; box-shadow: 0 0 5px rgba(0,0,0,0.1); position: fixed; z-index: 999; transition: font-size 0.2s linear; transition: height 0.3s ease; } .navcontent{ width:100%; min-width: 1080px; box-sizing: border-box; padding: 0 3rem; margin:0 auto; } .navbar ul{ padding: 0; margin: 0; border: 0px solid blue; float:right; } .navbar ul a{ display: block; width:9rem; height: 4rem; line-height:4rem; text-align: center; text-decoration: none; text-decoration-color: white; transition: all 0.3s ease; } .navbar ul > li{ list-style-type:none; height: 4rem; width: 9rem; float: left; border: 0px solid green; transition: all 0.3s ease; } .navbar ul li:hover { background: rgba(0,0,0,0.50); border-radius: 0.5rem 0.5rem 0 0; transition: all 0.3s ease; }/* .navbar ul li:hover ul{ display: block; } */ .navbar ul li ul{ padding: 0; margin: 0 auto; width: 9rem; border: 0px solid red; background: rgba(20,57,93,0.80); display: none; border-radius: 0 0 0.5rem 0.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.5); animation-duration: 0.3s; } .navbar ul li ul li{ list-style-type: none; font-size: 15px; width: 9rem; height: 3rem; line-height: 3rem; text-align: center; border: 0px solid purple; margin: 0 auto; } .navbar ul li ul li a{ line-height: 3rem; } .navbar ul li ul li:hover { background: rgba(0,0,0,0.50); border-radius: 0.5rem; }

.logo { height: 4rem; width: 7rem; float: left; transition: all 0.3s ease; } .logo:hover { border-radius: 1rem; background: rgba(0,0,0,0.3); transition: all 0.3s ease; } .logo a{ display: block; background: url(images/logo.png) no-repeat center; background-size: auto 3rem; width: 100%; height: 100%; transition: all 0.3s ease; } .folder{ display: none; } .navbottom input{ display: none; }

} @media screen and (min-width:768px){ .sidenav{ top:6rem; right: 7.5vw; padding: 0; position: fixed; list-style: none; display: none; z-index: 999; } .sidenav li{ list-style-type: none; height: 3.5rem; width: 10rem; margin: 1rem auto; border-radius: 3px; background: linear-gradient(-27deg,rgba(0,82,208,0.8),rgba(0,149,195,0.8)); box-shadow: 0px 0.1rem 0.3rem rgba(0,0,0,0.2); } .sidenav li a{ border-radius: 3px; display: block; text-align: center; width: 10rem; height: 3.5rem; line-height: 3.5rem; color: white; background-color: rgba(33,93,151,0); transition: all 0.3s ease; } .sidenav li a:hover{ background-color: rgba(33,93,151,1); transition: all 0.3s ease; } } @media screen and (max-width:1080px){

.navbar{ padding: 0; margin: 0; height: 4rem; width: 100%; border: 0px solid red; background: rgba(0,103,199,0.50); color: white; font-size: 15px; font-weight: normal; box-shadow: 0 0 5px rgba(0,0,0,0.5); position: fixed; z-index: 999; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .navbar .navbottom{ padding: 0; margin: 0; border: 0px solid blue; float:right; width:100%; text-align:center; overflow: hidden; background: rgba(20,57,93,0.80); border-radius: 0 0 1rem 1rem; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: relative; display: none; } .navbar ul a{ display: block; width: 100%; text-align: center; text-decoration: none; text-decoration-color: white; } .navbar ul li{ list-style-type:none; heigth: 100%; width: 100%; min-height: 3.5rem; line-height: 3.5rem; border: 0px solid green; transition: all 0.3s ease; white-space: nowrap; position: relative; } .navbar ul li a{ margin-left: 1.5rem; width: 50%; text-align:left; } .navbar ul li:nth-of-type(even){ background: rgba(0,0,0,0.10); } .navbar ul li:last-of-type{ border-radius: 0 0 1rem 1rem; } .navbar ul li:last-of-type ul:last-of-type{ border-radius: 0 0 1rem 1rem; } .navbar ul li ul{ padding: 0; margin: 0 auto; width: 100%; border: 0px solid red; background: rgba(20,57,93,0.80); position: relative; height: 0; overflow: hidden; transition: all 0.5s ease; } .navbar 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:last-of-type{ border-radius: 0; } .logo { height: 4rem; width: 5rem; float: left; } .logo a{ display: block; background: url(images/logo.png) no-repeat center; background-size: auto 2.5rem; width: 100%; height: 100%; } .folder{ padding: 0; margin: 0; opacity: 0; float: right; right: 0; width: 4rem; height: 3rem; position:fixed; z-index: 2; cursor: pointer;

} .folderback{ width: 4rem; height: 4rem; background: url(images/icons/menu.png) center no-repeat; background-size: 40%; position: fixed; float: right; right: 0; z-index: 1; }/* .folder:checked + .navbottom { display: block; opacity: 1; /*animation: fadeIn 0.3s ease; }*/ .navbottom input{ position: absolute; right: 1rem; top: 0rem; width: 30%; height: 3rem; opacity: 0; cursor: pointer; z-index: 2; }/* .navbottom input:checked + ul{ transition: all 0.5s ease-out; }*/ .navbottom .plus{ background: url(images/icons/plus.png) no-repeat center; background-size: 40%; width: 3rem; height:3rem; position: absolute; right: 0.6rem; top:0.3rem; }

} @media screen and (max-width:768px){ .sidenav{ display: none; padding: 0; margin: 0; } }