-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (66 loc) · 3.41 KB
/
index.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
<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, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title> Sidebar Menu collapse and Expand | Responsive Sidebar Menu collapse and Expand | Professional Sidebar Menu collapse and Expand | Responsive Sidebar Menu and Dashboard</title>
<meta name="description" content="The sidebar menu collapse and expand design is developed by html, css, javascript coding used to develop it and fully responsive design with flex concept used in the card design model for develop or create the template, website or design quickly and more user friendly for the developer or designer to easy customize the designs." />
<meta name="keywords" content="codingwithssr, sidebar menu collapse and expand html css w3schools, sidebar menu collapse and expand html css github, sidebar menu collapse and expand html css without,
sidebar menu collapse and expand html css example,
expand collapse sidebar menu,
bootstrap sidebar menu collapse with icon,
collapsible sidebar codepen,
collapse sidebar Bootstrap, expand collapse sidebar menu html css javascript
" />
<meta name="author" content="https://codepen.io/codingwithssr" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KL9C7XQPJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KL9C7XQPJP');
</script>
<!-- Google tag (gtag.js) this script for promote the code in google analytics-->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-M3N8GX9J');</script>
<!-- End Google Tag Manager -->
</head>
<div class="wrapper">
<nav id="sidebar">
<div class="head">
<h2 class="fulhide">
Codingiwithssr</h2>
<h4 class="active">CSSR</h4>
</div>
<ul>
<li><a href=""><i class="fa fa-home" style="font-size:24px"></i> <span>Home</span><p>Home</p></a>
</li><li><a href=""><i class="fa fa-user" style="font-size:24px"></i> <span>About</span><p>About</p></a></li>
<li><a href=""><i class="fa fa-sitemap" style="font-size:24px"></i> <span> Service</span><p> Service</p></a></li>
<li><a href=""><i class="fa fa-puzzle-piece" style="font-size:24px"></i> <span>Project</span> <p>Project</p></a></li>
<li><a href=""><i class="fa fa-map-marker" style="font-size:24px"></i> <span>Contact</span><p>Contact</p></a>
</li>
</ul>
</nav>
<div id="content">
<div class="menu" onclick="toggleBtn()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<h2>Welcome to Dashboard !</h2>
</div>
</div>
<script>
function toggleBtn() {
document.getElementById('sidebar').classList.toggle('active');
document.getElementById('content').classList.toggle('active');
}
</script>