Responsive Web Page - fixed SideNav Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>CSS Button colors</title>
</head>
<body>
<div class="sidenav">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
<div class="content">
<h1>CSS Temple</h1>
<p>A full height, fixed sidenav and content</p>
</div>
</body>
</html>
CSS Fixed Sidenav Style
*{
box-sizing: border-box;
}
body{
margin:0;
font-family: Arial, Helvetica, sans-serif;
}
.sidenav{
height:100%;
width:200px;
position: fixed;
z-index: 1;
top:0%;
left:0%;
background-color:#111;
overflow-x: hidden;
}
.sidenav a{
color: #fff;
padding:16px;
text-decoration: none;
display: block;
}
.sidenav a:hover{
background-color: #ddd;
color: #000;
}
.content{
margin-left:200px;
padding:20px;
}
No comments:
Post a Comment