Create a Side Bar in HTML
Creating a sidebar is pretty cool easy to understand.
If you don't understand anything, feel free to comment or message me.
CODE
<!DOCTYPE html>
<html>
<head>
<title>Creating a side bar</title>
</head>
<body>
<div id="nav">
<div id="nav_open">☰</div>
<div id="nav_con">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
</div>
<style>
#nav_open{
font-size: 30px;/*for making it big*/
}
#nav_con{
display: flex;
flex-direction: column;/*to make it display in a vertical direction*/
padding:0;
background-color: rgba(0,0,0,0.5); /*for look through*/
width: 70vw;
position: fixed;
left:-100vw;
transition: all 1s;
}
#nav_con a{
text-decoration: none;/*to remove the underline*/
margin:10px;
color:white;
}
#nav:hover #nav_con{
left:0;
}
#nav{
position: relative;
display: inline-block;
}
</style>
</body>
</html>
Comments
Post a Comment