<section id="navigation">
<!--Side Navigation Bar for small screens -->
<div class="small-navbar">
<!--For the Side Menu-->
<div class="spinner-master">
<input type="checkbox" onchange='handleChange(this);' id="spinner-form3" />
<label class="spinner-spin3" for="spinner-form3">
<div class="spinner3 diagonal part-1"></div>
<div class="spinner3 horizontal"></div>
<div class="spinner3 diagonal part-2"></div>
</label>
<div id="side-nav" class="side-nav">
<a href="#">Home</a>
<a href="#">Institute</a>
<a href="#">Academic</a>
<a href="#">Department</a>
<a href="#">Facilities</a>
<a href="#">Contact</a>
</div>
</div>
<!-- Contact Portion of the Navigation Bar-->
<div class="dots-master">
<input type="checkbox" id="dots-form" />
<label class="dots3" for="dots-form">
<div class="dots diagonal part-1"></div>
<div class="dots horizontal"></div>
<div class="dots diagonal part-2"></div>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="nav-bar">
<ul>
<li><a>Home</a></li>
<li><a href="#">Institute</a></li>
<li><a href="#">Academic</a></li>
<li><a href="#">Department</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</section>
html{
font-family: sans-serif;
overflow-x: hidden;
}
.small-navbar, .nav-bar{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: rgba(0,0,0,0.5);
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
float: left;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.side-nav > a{
text-decoration: none;
padding: 10px 20px;
color: white;
font-size: 30px;
display: block;
}
.side-nav a:hover{
color: grey;
}
.spinner-master input[type="checkbox"]:checked ~ .side-nav{
width: 250px;
}
.clearfix::after{
content: "";
clear: both;
display: table;
}
.spinner-master {
position: relative;
left: 0;
margin: 20px 25px 10px 10px;
float: left;
height: 25px;
width: 25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master input[type="checkbox"] {
display: none;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
}
.spinner-master .spinner3 {
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: calc(5px * 1.3 );
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: calc(5px * 1.3 );
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .horizontal{
opacity: 0;
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-2{
margin-top: calc(-1 * ( 5px + (5px * 2.2 ) ));
}
/*Style three*/
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .horizontal {
transform: scale(2, 1);
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-1 {
transform: rotate(-135deg);
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin3 > .diagonal.part-2 {
transform: rotate(135deg);
}
.dots-master{
position: relative;
right: 0;
margin: 20px 25px 10px 10px;
float: right;
height: 25px;
width: 25px;
}
.dots-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.dots-master input[type="checkbox"] {
display: none;
}
.dots-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
}
.dots-master .dots {
position: absolute;
clear: both;
height: 3px;
width: 3px;
border-radius: 50%;
background-color: #fff;
}
.dots-master .diagonal.part-1 {
position: relative;
float: right;
}
.dots-master .diagonal.part-2 {
position: relative;
float: right;
margin-top: calc(5px * 1.3 );
}
.dots-master .horizontal {
position: relative;
float: right;
margin-top: calc(5px * 1.3 );
}
.dots-master input[type="checkbox"]:checked ~ .dots3 > .horizontal{
opacity: 0;
}
.dots-master input[type="checkbox"]:checked ~ .dots3 > .diagonal.part-2{
margin-top: calc(-1 * ( 5px + (5px * 2.2 ) ));
}
/*Style three*/
.dots-master input[type="checkbox"]:checked ~ .dots3 > .horizontal {
border-radius: 0;
width: 100%;
transform: scale(2, 1);
}
.dots-master input[type="checkbox"]:checked ~ .dots3 > .diagonal.part-1 {
border-radius: 0;
width: 100%;
transform: rotate(-135deg);
}
.dots-master input[type="checkbox"]:checked ~ .dots3 > .diagonal.part-2 {
border-radius: 0;
width: 100%;
transform: rotate(135deg);
}
.nav-bar{
display: none;
}
.nav-bar > ul{
list-style-type: none;
}
.nav-bar > ul > li{
display: inline-block;
}
.nav-bar > ul > li > a{
text-decoration: none;
padding: 14px 16px;
color: white;
}
.nav-bar > ul > li > a:hover{
border-bottom: 4px solid red;
}
@media screen and (min-width: 700px){
.small-navbar{
display: none;
}
.nav-bar{
display: block;
}
}