Skip to content

Commit 5a0fb3a

Browse files
author
codeblogger
committed
Html, css and js
1 parent fab2fee commit 5a0fb3a

File tree

3 files changed

+336
-0
lines changed

3 files changed

+336
-0
lines changed

‎Bootstrap Sidebar Menu/Bootstrap Sidebar Menu.png‎

23.6 KB
Loading

‎Bootstrap Sidebar Menu/bootstrap sidebar menu.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>page</title>
6+
<link rel="stylesheet" type="text/css" href="main.css">
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
15+
16+
</head>
17+
<body>
18+
19+
<section class="sidebar">
20+
<div class="hamburger_icon">
21+
<div class="icon"></div>
22+
</div>
23+
<div class="sidebar-header px-5">
24+
<div class="row">
25+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png" alt="">
26+
<h4 class="d-flex align-items-center px-2">Truecodes</h4>
27+
</div>
28+
</div>
29+
<div class="sidebar-search">
30+
<div class="input-group">
31+
<div class="input-group-prepend">
32+
<span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white"
33+
aria-hidden="true"></i></span>
34+
</div>
35+
<input onkeyup="searchFunction()" id="search" type="text" class="form-control search-box" placeholder="Search" aria-label="Search">
36+
</div>
37+
</div>
38+
39+
<div class="sidebar-tag">
40+
<ul id="tags" class="list-group list-group-flush">
41+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
42+
<a href="#" class="nav-link">HTML</a>
43+
<span class="badge badge-warning badge-pill text-light">14</span>
44+
</li>
45+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
46+
<a href="#" class="nav-link">CSS</a>
47+
<span class="badge badge-warning badge-pill text-light">9</span>
48+
</li>
49+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
50+
<a href="#" class="nav-link">JavaScript</a>
51+
<span class="badge badge-warning badge-pill text-light">25</span>
52+
</li>
53+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
54+
<a href="#" class="nav-link">JQuery</a>
55+
<span class="badge badge-warning badge-pill text-light">17</span>
56+
</li>
57+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
58+
<a href="#" class="nav-link">Bootstrap</a>
59+
<span class="badge badge-warning badge-pill text-light">5</span>
60+
</li>
61+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
62+
<a href="#" class="nav-link">Angular</a>
63+
<span class="badge badge-warning badge-pill text-light">10</span>
64+
</li>
65+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
66+
<a href="#" class="nav-link">Node.js</a>
67+
<span class="badge badge-warning badge-pill text-light">14</span>
68+
</li>
69+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
70+
<a href="#" class="nav-link">Mongodb</a>
71+
<span class="badge badge-warning badge-pill text-light">9</span>
72+
</li>
73+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
74+
<a href="#" class="nav-link">Vue.js</a>
75+
<span class="badge badge-warning badge-pill text-light">25</span>
76+
</li>
77+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
78+
<a href="#" class="nav-link">JQuery</a>
79+
<span class="badge badge-warning badge-pill text-light">17</span>
80+
</li>
81+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
82+
<a href="#" class="nav-link">Ember.js</a>
83+
<span class="badge badge-warning badge-pill text-light">5</span>
84+
</li>
85+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
86+
<a href="#" class="nav-link">Meteor</a>
87+
<span class="badge badge-warning badge-pill text-light">10</span>
88+
</li>
89+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
90+
<a href="#" class="nav-link">Polymer</a>
91+
<span class="badge badge-warning badge-pill text-light">5</span>
92+
</li>
93+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
94+
<a href="#" class="nav-link">SQL</a>
95+
<span class="badge badge-warning badge-pill text-light">10</span>
96+
</li>
97+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
98+
<a href="#" class="nav-link">PHP</a>
99+
<span class="badge badge-warning badge-pill text-light">5</span>
100+
</li>
101+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
102+
<a href="#" class="nav-link">mySQL</a>
103+
<span class="badge badge-warning badge-pill text-light">10</span>
104+
</li>
105+
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
106+
<a href="#" class="nav-link">Python</a>
107+
<span class="badge badge-warning badge-pill text-light">10</span>
108+
</li>
109+
</ul>
110+
</div>
111+
112+
<div class="sidebar-menu mt-5">
113+
<div class="container">
114+
<ul class="list-group">
115+
<li class="list-group-item">HOME</li>
116+
<li class="list-group-item">SERVICES</li>
117+
<li class="list-group-item dropdown-toggle" id="dropdown_but">ORDERS
118+
<ul id="drop_list" class="dropdown-list">
119+
<li class="list-group-item">Dropdown 1</li>
120+
<li class="list-group-item">Dropdown 2</li>
121+
<li class="list-group-item">Dropdown 3</li>
122+
</ul>
123+
</li>
124+
<li class="list-group-item">ABOUT</li>
125+
</ul>
126+
</div>
127+
</div>
128+
129+
130+
</section>
131+
132+
<script>
133+
134+
$(document).ready(function(){
135+
$("#dropdown_but").click(function(){
136+
$("#drop_list").toggle(500)
137+
})
138+
$(".hamburger_icon").click(function(){
139+
$(".hamburger_icon").toggleClass("active");
140+
$(".sidebar").toggleClass("scroll");
141+
})
142+
});
143+
144+
145+
function searchFunction(){
146+
let search,tags,filter,tag,a,i;
147+
search = document.getElementById("search");
148+
filter = search.value.toUpperCase();
149+
ul = document.getElementById("tags");
150+
li = ul.getElementsByTagName("li");
151+
152+
for(i = 0; i < li.length; i++){
153+
a = li[i].querySelectorAll("a")[0];
154+
if( a.innerHTML.toUpperCase().indexOf(filter) > -1){
155+
$(li[i]).removeClass("act");
156+
}
157+
else{
158+
$(li[i]).addClass("act");
159+
}
160+
}
161+
}
162+
163+
164+
165+
166+
</script>
167+
168+
</body>
169+
</html>

‎Bootstrap Sidebar Menu/bootstrap sidebar menu.scss‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600');
2+
.sidebar{
3+
position: relative;
4+
width: 300px;
5+
background: #8A4C55;
6+
height: 100vh;
7+
font-family: 'Titillium Web', sans-serif;
8+
left: -300px;
9+
transition: 1s;
10+
&.scroll{
11+
left: 0px;
12+
}
13+
14+
.hamburger_icon{
15+
width: 50px;
16+
height: 50px;
17+
position: absolute;
18+
top: 0px;
19+
right: -50px;
20+
cursor: pointer;
21+
.icon{
22+
position: relative;
23+
width: 40px;
24+
height: 7px;
25+
top: 20px;
26+
left: 5px;
27+
background:#8A4C55;
28+
transition: .4s;
29+
&:before{
30+
content: "";
31+
position: absolute;
32+
width: 40px;
33+
height: 7px;
34+
top: -10px;
35+
background:#8A4C55;
36+
transition: .6s;
37+
}
38+
&:after{
39+
content: "";
40+
position: absolute;
41+
width: 40px;
42+
height: 7px;
43+
top: 10px;
44+
background:#8A4C55;
45+
transition: .6s;
46+
}
47+
}
48+
&.active{
49+
.icon{
50+
background: none;
51+
left: -50px;
52+
&:before{
53+
top: 5px;
54+
transform: rotate(45deg);
55+
background: #ffac1d;
56+
}
57+
&:after{
58+
top: 5px;
59+
transform: rotate(-225deg);
60+
background: #ffac1d;
61+
}
62+
}
63+
}
64+
65+
}
66+
67+
.sidebar-header{
68+
margin-bottom: 40px;
69+
padding-top: 40px !important;
70+
71+
img{
72+
width: 60px;
73+
height: 60px;
74+
background-size: cover;
75+
}
76+
h4{
77+
color: #f9f9eb;
78+
}
79+
}
80+
81+
.sidebar-search{
82+
overflow: hidden;
83+
height: 40px;
84+
.input-group-prepend{
85+
span{
86+
border-radius: 0px !important;
87+
background-color: #ffac1d;
88+
border:none;
89+
box-shadow: inset -5px 0px 3px rgba(0,0,0,.25);
90+
transition:1s;
91+
width: 40px;
92+
height: 40px;
93+
z-index: 99;
94+
cursor: pointer;
95+
.fas{
96+
color: #f9f9eb !important;
97+
font-size: 20px;
98+
}
99+
&:hover{
100+
box-shadow: inset -5px 0px 3px rgba(0,0,0,.50);
101+
}
102+
&:active{
103+
position: absolute;
104+
width: 300px;
105+
}
106+
}
107+
}
108+
.search-box{
109+
border-radius: 0px !important;
110+
border-bottom: 1px solid #ffac1d;
111+
border-top: 1px solid #ffac1d;
112+
border-left: none;
113+
border-right: none;
114+
height: 40px;
115+
&:focus{
116+
box-shadow: 0px 0px 10px #262626;
117+
}
118+
}
119+
}
120+
121+
.sidebar-tag{
122+
height: 180px;
123+
overflow: scroll;
124+
&::-webkit-scrollbar {
125+
display: none;
126+
}
127+
li{
128+
height: 36px;
129+
cursor: pointer;
130+
display: block;
131+
&.act{
132+
display: none !important;
133+
}
134+
}
135+
136+
}
137+
138+
.sidebar-menu{
139+
.list-group{
140+
141+
li{
142+
background: #D97A7A;
143+
color: #f9f9eb;
144+
cursor: pointer;
145+
transition: .5s;
146+
&:hover{
147+
box-shadow: inset 0px 0px 20px rgba(0,0,0,.3)
148+
}
149+
&:active{
150+
background: #8A4C55
151+
}
152+
}
153+
#drop_list{
154+
display: none;
155+
156+
li{
157+
position: relative;
158+
left: -61px;
159+
top: 15px;
160+
width: 144%;
161+
text-indent: 20px;
162+
background: rgb(169, 95, 95);
163+
}
164+
}
165+
}
166+
}
167+
}

0 commit comments

Comments
 (0)