-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsiveSidebar.html
82 lines (81 loc) · 2.76 KB
/
responsiveSidebar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<style>
*{
margin: 0;padding: 0;
font-family: verdana;
}
.sidebar{
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a{
display: block;
color: black;
padding: 16px;
text-decoration: none;
transition: 0.2s;
}
.sidebar a:hover:not(.active){
background-color: #ccc;
}
.sidebar a.active{
background-color: #2196F3;
color: white;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content{
margin-left: 200px;
padding: 3em;
height: 1000px;
}
/* Media queries */
@media screen and (max-width: 700px){
.sidebar{
width: 100%;
height: auto;
position: relative;
}
.sidebar a{
float: none;
display: inline-block;
}
div.content{
margin-left: 0;
}
}
@media screen and (max-width: 400px){
.sidebar a{
display: block;
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<!-- The Sidebar -->
<div class="sidebar">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique fuga quasi itaque mollitia porro pariatur! Fugit iste sunt eveniet, laborum nisi eaque minima repudiandae asperiores magni recusandae. Dolorum, ullam maiores sunt consequatur repellendus quas.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed provident tempora cumque repudiandae minus fugit natus, ex aspernatur itaque quam ea, earum facere possimus. Praesentium officiis consectetur fugiat magnam suscipit quisquam neque reprehenderit tempora!</p>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, maxime!</h3>
</div>
</body>
</html>