Skip to content
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit 5a75445

Browse files
accgitaccgit
committed
replace simplebar to perfect scrollbar
1 parent 7a0b0f2 commit 5a75445

File tree

7 files changed

+83
-55
lines changed

7 files changed

+83
-55
lines changed

‎src/css/simplebar.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/css/style.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
11

2-
/*
3-
import css styles
4-
*/
5-
@import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css);
6-
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
7-
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin-ext);
8-
@import url(https://css-ui.github.io/css/cssui.min.css);
9-
@import url(style.menu.css);
10-
@import url(simplebar.css);
11-
122
/*
133
elements
144
*/

‎src/css/style.menu.css‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
.nav .click .menu {
1212
border-radius: 30px;
13-
font-size: 14px;
13+
font-size: 16px;
1414
padding: 7px 8px;
1515
}
1616

@@ -38,7 +38,7 @@
3838

3939
.sidebar ul.menu {
4040
list-style: none;
41-
height: 300px;
41+
height: 460px;
4242
margin: 0;
4343
}
4444

@@ -72,10 +72,32 @@
7272
display: block;
7373
}
7474

75+
/*
76+
perfect scrollbar
77+
*/
78+
.scrollbar {
79+
position: relative;
80+
overflow: hidden;
81+
}
82+
83+
.ps__thumb-y {
84+
width: 4px;
85+
}
86+
87+
.ps__rail-y {
88+
margin-top: 10px;
89+
width: auto;
90+
}
91+
92+
.ps__rail-y:hover > .ps__thumb-y,
93+
.ps__rail-y:focus > .ps__thumb-y {
94+
width: 4px;
95+
}
96+
7597
@media only screen and (min-width: 768px) {
7698

7799
.sidebar ul.menu {
78-
height: 660px;
100+
height: 800px;
79101
}
80102

81103
.nav .click { visibility: hidden; }

‎src/css/theme/style.menu.dark.css‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33
light theme sidebar menu
44
*/
55
.nav .click { color: white; }
6-
.nav .click .menu { color: #6f788d; }
6+
.nav .click .menu {
7+
transition: all 0.1s ease-in-out;
8+
color: #656c7c;
9+
}
10+
711
.nav .click .menu:hover {
8-
background-color: #404757;
9-
color: #e6e9ed;
12+
background-color: #262a34;
1013
}
1114

1215
.sidebar .title {
@@ -46,9 +49,13 @@
4649
}
4750

4851
/*
49-
simplebar
52+
perfect scrollbar
5053
*/
51-
.simplebar-scrollbar {
52-
background: #596072;
53-
width: 5px;
54+
.ps__thumb-y {
55+
background-color: #656c7c;
56+
}
57+
58+
.ps__rail-y:hover > .ps__thumb-y,
59+
.ps__rail-y:focus > .ps__thumb-y {
60+
background-color: #656c7c;
5461
}

‎src/css/theme/style.menu.light.css‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
light theme sidebar menu
44
*/
55
.nav .click { color: white; }
6-
.nav .click .menu { color: #acacac; }
6+
.nav .click .menu {
7+
transition: all 0.1s ease-in-out;
8+
color: #acacac;
9+
}
10+
711
.nav .click .menu:hover {
812
background-color: #fff;
913
}
@@ -20,7 +24,7 @@
2024
.sidebar ul.menu li a:hover {
2125
background-color: #f4f4f4;
2226
font-weight: 600;
23-
color: #e95656;
27+
color: #636363;
2428
}
2529

2630
.sidebar ul.menu li a.current {
@@ -45,9 +49,13 @@
4549
}
4650

4751
/*
48-
simplebar
52+
perfect scrollbar
4953
*/
50-
.simplebar-scrollbar {
51-
background: #d3d3d3;
52-
width: 5px;
54+
.ps__thumb-y {
55+
background-color: #d3d3d3;
56+
}
57+
58+
.ps__rail-y:hover > .ps__thumb-y,
59+
.ps__rail-y:focus > .ps__thumb-y {
60+
background-color: #d3d3d3;
5361
}

‎src/index.html‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<title>CSS UI - Responsive menu</title>
99

10-
<!-- CSS styles -->
10+
<!-- css styles -->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.3.0/css/perfect-scrollbar.min.css">
13+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=latin-ext">
15+
<link rel="stylesheet" href="https://css-ui.github.io/css/cssui.min.css">
16+
17+
<link rel="stylesheet" href="css/style.menu.css">
1118
<link rel="stylesheet" href="css/style.css">
1219

1320
<!-- css sidebar themes -->
@@ -20,7 +27,7 @@
2027

2128
<!-- click menu -->
2229
<div class="click">
23-
<i class="fa fa-bars menu" aria-hidden="true"></i>
30+
<i class="fas fa-bars menu"></i>
2431
</div>
2532

2633
<!-- sidebar -->
@@ -34,7 +41,7 @@
3441
<div class="responsive">
3542

3643
<!-- sidebar menu -->
37-
<ul class="menu" data-simplebar>
44+
<ul class="menu scrollbar">
3845

3946
<!-- languages -->
4047
<li>
@@ -91,8 +98,25 @@
9198
<div class="content-wrapper"></div>
9299

93100
<!-- javascript libraries and plugins -->
94-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
95-
<script src="js/simplebar.js"></script>
96-
<script src="js/jquery.responsive.menu.js"></script>
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.3.0/perfect-scrollbar.min.js"></script>
103+
104+
<!-- call jquery plugins etc. -->
105+
<script>
106+
$(function() {
107+
108+
// perfect scrollbar
109+
const ps = new PerfectScrollbar('.scrollbar');
110+
111+
// responsive sidebar
112+
$('.nav .click').on('click', function() {
113+
var nav = '.nav .responsive';
114+
$(nav).slideToggle('fast');
115+
$(window).on('resize', function() {
116+
$(window).width() >= 768 ? $(nav).show() : $(nav).hide();
117+
});
118+
});
119+
});
120+
</script>
97121
</body>
98122
</html>

‎src/js/simplebar.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)