Skip to content

Commit dae6b10

Browse files
CodeHimBlogCodeHimBlog
authored
Add files via upload
1 parent 5fbb373 commit dae6b10

File tree

2 files changed

+559
-0
lines changed

2 files changed

+559
-0
lines changed

‎css/jside-menu.css

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
/* Plugin: jSide Menu (Responsive Side Menu)
2+
* Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0
3+
* Author: Asif Mughal
4+
* GitHub: https://github.com/CodeHimBlog
5+
* URL: https://www.codehim.com
6+
* License: MIT License
7+
* Copyright (c) 2018 - Asif Mughal
8+
*/
9+
/* File: jquery.jside-menu.css */
10+
@font-face {
11+
font-family: 'Helvetica Neue';
12+
font-style: normal;
13+
font-weight: 300;
14+
font-smoothing: antialiased;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
src: local('Helvetica Neue'), local('HelveticaNeue'), url(http://themes.googleusercontent.com/licensed/font?kit=Lx1xfUTR4qFjwg0Z_pb900DGSpWewu0sZH-jqLz8Q00) format('truetype');
18+
}
19+
*{ margin: 0;
20+
padding: 0;
21+
}
22+
body{
23+
font-family: 'Helvetica Neue';
24+
font-weight: 300;
25+
font-smoothing: antialiased;
26+
-webkit-font-smoothing: antialiased;
27+
-moz-osx-font-smoothing: grayscale;
28+
29+
}
30+
:root{
31+
--skin-hover: rgba(0, 0, 0, 0.1);
32+
--skin-color: rgba(255, 255, 255, 0.9);
33+
}
34+
.default-skin{
35+
font-family: 'Helvetica Neue';
36+
font-weight: 300;
37+
font-smoothing: antialiased;
38+
-webkit-font-smoothing: antialiased;
39+
-moz-osx-font-smoothing: grayscale;
40+
--skin: #2a2a2e;
41+
--skin-hover: #2098D1;
42+
--skin-color: rgba(255, 255, 255, 0.8);
43+
}
44+
.light-skin{
45+
--skin: #f0f0f0;
46+
--skin-hover: #ddd;
47+
--skin-color: #232323;
48+
}
49+
50+
.menubar{
51+
width: 100%;
52+
height: 48px;
53+
display: block;
54+
background: var(--skin);
55+
color: var(--skin-color);
56+
line-height: 48px;
57+
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
58+
}
59+
.menu-trigger{
60+
position: absolute;
61+
-webkit-appearance: none;
62+
border: 0;
63+
outline: 0;
64+
background: transparent;
65+
top: 6px;
66+
padding: 0 5px;
67+
color: var(--skin-color);
68+
cursor: pointer;
69+
-webkit-tap-highlight-color: rgba(0, 0, 0, .2);
70+
71+
72+
}
73+
.menu-trigger:hover{
74+
opacity: 0.8;
75+
-webkit-opacity: 0.8;
76+
}
77+
78+
.menu-trigger:before{
79+
font-family: 'Material-Design-Iconic-Font';
80+
content: '\f197';
81+
font-size: 22pt;
82+
83+
}
84+
85+
.menu-trigger.left{
86+
left: 20px;
87+
88+
}
89+
90+
.menu-trigger.right{
91+
right: 20px;
92+
}
93+
.sticky{
94+
position: fixed;
95+
top: 0;
96+
left: 0;
97+
}
98+
99+
.menu-container{
100+
overflow: auto;
101+
display: block;
102+
top: 120px;
103+
104+
}
105+
.position-left{
106+
left: -270px;
107+
}
108+
.position-right{
109+
right: -270px;
110+
}
111+
112+
.position-left.open{
113+
left: 0;
114+
}
115+
116+
.position-right.open{
117+
right: 0;
118+
}
119+
120+
.menu-container,
121+
.menu-head,
122+
.menu-left,
123+
.menu-left.open
124+
.menu-right,
125+
.menu-right.open{
126+
transition: .4s;
127+
-webkit-transition: .4s;
128+
-moz-transition: .4s;
129+
-ms-transition: .4s;
130+
131+
}
132+
133+
.menu-container,
134+
.menu-head{
135+
background: var(--skin);
136+
position: fixed;
137+
z-index: 100;
138+
width: 270px;
139+
140+
}
141+
.menu-head .layer{
142+
background: rgba(0, 0, 0, 0.2);
143+
display: block;
144+
padding: 15px;
145+
}
146+
147+
148+
.menu-head{
149+
height: 120px;
150+
box-sizing: border-box;
151+
margin: 0px;
152+
top: 0;
153+
154+
}
155+
156+
.menu-items {
157+
list-style: none;
158+
font-size: 14px;
159+
}
160+
161+
.dropdown-heading,
162+
.menu-items li a{
163+
text-decoration: none;
164+
padding: 12px 12px 12px 45px;
165+
display: block;
166+
color: var(--skin-color);
167+
border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
168+
margin: 0;
169+
cursor: pointer;
170+
user-select: none;
171+
}
172+
.dropdown-heading:hover,
173+
.menu-items li a:hover{
174+
background: var(--skin-hover);
175+
}
176+
177+
178+
179+
@keyframes fadeIn{
180+
from{
181+
opacity: 0;
182+
-webkit-opacity: 0;
183+
}
184+
to{
185+
opacity: 1;
186+
-webkit-opacity: 1;
187+
}
188+
}
189+
-webkit-@keyframes fadeIn{
190+
from{
191+
opacity: 0;
192+
-webkit-opacity: 0;
193+
}
194+
to{
195+
opacity: 1;
196+
-webkit-opacity: 1;
197+
}
198+
}
199+
200+
.item-icon{
201+
margin: 0 25px 0 0;
202+
display: inline;
203+
width: 32px;
204+
height: 32px;
205+
line-height: 32px;
206+
position: absolute;
207+
font-size: 15pt;
208+
margin: 5px;
209+
text-align: center;
210+
color: var(--skin-color);
211+
212+
}
213+
214+
/* Dropdowns */
215+
.has-sub ul{
216+
list-style: none;
217+
overflow: hidden;
218+
height: 0px;
219+
transition: .360s;
220+
background: #f2f9f9;
221+
}
222+
223+
.has-sub ul li a{
224+
display: block;
225+
padding: 12px 33px;
226+
border-bottom: 0;
227+
font-size: 13px;
228+
color: #444;
229+
transition: .1s;
230+
-webkit-transition: .1s;
231+
border-bottom: 1px dotted #e1e1e1;
232+
}
233+
.has-sub ul li a:hover{
234+
background: #dedede;
235+
transition: .1s;
236+
-webkit-transition: .1s;
237+
}
238+
239+
.has-sub span{
240+
display: block;
241+
box-sizing: border-box;
242+
243+
}
244+
245+
.has-sub i.arrow{
246+
float: right;
247+
margin-right: 10px;
248+
transition: 0.360s;
249+
font-size: 16px;
250+
}
251+
252+
.has-sub .arrowdown{
253+
transform: rotateZ(180deg);
254+
-webkit-transform: rotateZ(180deg);
255+
-moz-transform: rotateZ(180deg);
256+
transition: 0.360s;
257+
-webkit-transition: 0.360s;
258+
-moz-transition: 0.360s;
259+
}
260+
.col{
261+
display: table;
262+
263+
}
264+
.row{
265+
display: table-cell;
266+
267+
}
268+
.for-name {
269+
max-width: 140px;
270+
padding: 10px;
271+
color: var(--skin-color);
272+
}
273+
.for-pic {
274+
max-width: 70px;
275+
}
276+
277+
.profile-pic img{
278+
width: 60px;
279+
height: 60px;
280+
border-radius: 50%;
281+
border: 1px solid rgba(255, 255, 255, 0.01);
282+
object-fit: cover;
283+
284+
}
285+
.menu-head h3 {
286+
top: -35px;
287+
font-size: 13pt;
288+
font-weight: 400;
289+
290+
}
291+
292+
.tagline,
293+
.menu-head h3{
294+
display: block;
295+
position: relative;
296+
overflow: hidden;
297+
text-overflow: ellipsis;
298+
white-space: nowrap;
299+
}
300+
301+
.tagline{
302+
font-size: 11px;
303+
bottom: 32px;
304+
display: block;
305+
306+
}
307+
308+
/* Dim background effect */
309+
.dim-overlay{
310+
display: none;
311+
}
312+
313+
.dim-overlay:before {
314+
content: "";
315+
background-color: rgba(0, 0, 10, .4);
316+
height: 100vh;
317+
left: 0;
318+
position: fixed;
319+
top: 0;
320+
width: 100%;
321+
overflow: hidden;
322+
z-index: 2;
323+
}
324+
.logo{
325+
display: block;
326+
text-align: center;
327+
margin-left: auto;
328+
margin-right: auto;
329+
font-size: 22px;
330+
}
331+
.logo img{
332+
width: 130px;
333+
margin-top: 10px;
334+
height: auto;
335+
336+
}
337+
.logo a{
338+
text-decoration: none;
339+
color: var(--skin-color);
340+
}
341+
.logo a:hover{
342+
color: var(--skin-hover);
343+
}

0 commit comments

Comments
 (0)