-
Notifications
You must be signed in to change notification settings - Fork 0
/
sidebarIcons.html
96 lines (93 loc) · 3.75 KB
/
sidebarIcons.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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>SideBar with icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
font-family: verdana;
}
body{
background-color: #ddd;
}
h2{
font-size: 2.5rem;
text-transform: uppercase;
}
p{
font-size: 1.2rem;
}
.sidebar{
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 16px;
}
.sidebar a{
padding: 6px 8px 6px 16px;
text-decoration: none;
color: white;
display: block;
font-size: 20px;
}
.sidebar a:hover{
color: crimson;
}
.main{
margin-left: 160px;
padding: 0px 10px;
display: none;
}
@media screen and (max-width: 450px){
.sidebar{padding-top: 15px;}
.sidebar a{font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#" onclick="show('home')"><i class="fa fa-fw fa-home" id="default"></i>Home</a>
<a href="#" onclick="show('services')"><i class="fa fa-fw fa-wrench"></i>Services</a>
<a href="#" onclick="show('clients')"><i class="fa fa-fw fa-user"></i>Clients</a>
<a href="#" onclick="show('contact')"><i class="fa fa-fw fa-envelope"></i>Contact</a>
</div>
<div class="main" id="home">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repudiandae consequatur libero blanditiis, doloribus tenetur sapiente fugiat eius minus ipsa eum harum omnis non eos perferendis ad, maxime iste quasi odio sunt placeat deleniti.</p>
</div>
<div class="main" id="services">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repudiandae consequatur libero blanditiis, doloribus tenetur sapiente fugiat eius minus ipsa eum harum omnis non eos perferendis ad, maxime iste quasi odio sunt placeat deleniti. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium, sapiente.</p>
</div>
<div class="main" id="clients">
<h2>Clients</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repudiandae consequatur libero blanditiis, doloribus tenetur sapiente fugiat eius minus ipsa eum harum omnis non eos perferendis ad, maxime iste quasi odio sunt placeat deleniti.</p>
</div>
<div class="main" id="contact">
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repudiandae consequatur libero blanditiis, doloribus tenetur sapiente fugiat eius minus ipsa eum harum omnis non eos perferendis ad, maxime iste quasi odio sunt placeat deleniti.</p>
</div>
<script>
function show(pgname){
//Declare all variables
var i,btns,content;
btns= document.getElementsByTagName("a");
content= document.getElementsByClassName("main");
//Hide all content
for(i=0;i<content.length;i++){
content[i]= content[i].style.display= "none";
}
//Show specific content
document.getElementById(pgname).style.display= "block";
}document.getElementById("default").click();
</script>
</body>
</html>