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

Commit 8def568

Browse files
accgitaccgit
committed
Fix and update
1 parent 14e0efb commit 8def568

File tree

7 files changed

+146
-19
lines changed

7 files changed

+146
-19
lines changed

‎css/style.menu.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
font-size: 100%;
5353
list-style: none;
5454
margin: 0;
55+
overflow: hidden;
5556
}
5657

5758
.sidebar ul.menu li {
@@ -79,7 +80,7 @@
7980

8081
.sidebar ul.menu li ul li ul {
8182
display: none;
82-
margin: 15px 10px;
83+
margin: 15px 0 15px 8px;
8384
padding-left: 10px;
8485
}
8586

@@ -102,11 +103,11 @@
102103
}
103104

104105
.sidebar ul.menu li ul li.parent a.employ.rotate:before {
105-
transform: rotate(-180deg);
106+
transform: rotate(180deg);
106107
}
107108

108-
.sidebar ul.menu li ul li.parent a.employ.rotate.active:before {
109-
transform: rotate(180deg);
109+
.sidebar ul.menu li ul li.parent a.employ.rotate-revert:before {
110+
transform: rotate(-180deg);
110111
}
111112

112113
/* perfect scrollbar

‎css/style.menu.dark.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
}
5959

6060
.sidebar ul.menu li ul li ul {
61-
border-left: 2px solid #363c49;
61+
border-left: 1px solid #363c49;
6262
}
6363

6464
/* notice

‎css/style.menu.light.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
}
5959

6060
.sidebar ul.menu li ul li ul {
61-
border-left: 2px solid #ebebeb;
61+
border-left: 1px solid #ebebeb;
6262
}
6363

6464
/* notice

‎js/responsive.menu.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11

2-
/*
3-
* Responsive menu.
2+
/*!
3+
* CSS UI - Responsive menu
4+
* Copyright Zdeněk Papučík
5+
* MIT License
46
*/
57
(function($) {
68

7-
// click show/hide menu
9+
10+
// toggle sidebar menu
811
$('.nav .click').on('click', function() {
912
$('.nav .responsive').toggleClass('expandable');
1013
});
1114

15+
1216
// init menu
1317
$('ul.menu li').each(function() {
1418
$(this).parent().find('li.parent a.employ').addClass('up');
15-
if ($(this).children('li.parent a.current').length > 0 ) {
16-
$(this).parent().find('ul.submenu').toggle();
17-
$(this).parent().find('li.parent a.employ').addClass('active down');
19+
if ($(this).find('li.parent a.current').length > 0 ) {
20+
$(this).parent().find('a.current').addClass('active down');
21+
$(this).parent().find('a.current').next('ul.submenu').show();
1822
}
1923
});
2024

25+
2126
// active menu
2227
$('ul.menu li a').on('click', function() {
23-
$(this).parent('li.parent').find('a.employ').toggleClass('active');
24-
$(this).parent().find('ul.submenu').slideToggle('fast');
25-
$(this).parent().find('ul.submenu ul.submenu').toggle();
28+
$(this).parent().find('a.employ').toggleClass('active');
29+
$(this).next('ul.submenu').slideToggle('fast');
2630
});
2731

32+
2833
// click transition
2934
$('a.employ').on('click', function() {
3035
$(this).addClass('transition');
3136
$(this).toggleClass('rotate');
37+
if ($(this).parent().find('a.employ').hasClass('down')) {
38+
$(this).toggleClass('rotate-revert');
39+
}
3240
});
3341

42+
3443
}(jQuery));

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"dependencies": {
2020
"css-ui-simple": "^2.5.2",
2121
"font-awesome": "^4.7.0",
22-
"jquery": "^3.3.1",
22+
"jquery": "^3.4.1",
2323
"open-sans-fontface": "^1.4.0",
2424
"perfect-scrollbar": "^1.4.0"
2525
},

‎responsive.menu.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="cs">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CSS UI - Simple responsive menu</title>
7+
8+
<!-- css -->
9+
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
10+
<link rel="stylesheet" href="node_modules/perfect-scrollbar/css/perfect-scrollbar.css">
11+
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
12+
<link rel="stylesheet" href="node_modules/open-sans-fontface/open-sans.css">
13+
<link rel="stylesheet" href="node_modules/css-ui-simple/css/cssui.css">
14+
15+
<!-- css menu -->
16+
<link rel="stylesheet" href="css/style.menu.css">
17+
<link rel="stylesheet" href="css/style.menu.light.css">
18+
<style>
19+
body {
20+
background: #f2f2f2;
21+
font-family: 'Open Sans', sans-serif;
22+
font-size: 1.438em;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<!-- nav wrapper -->
28+
<div class="nav">
29+
30+
<!-- click show/hide menu -->
31+
<div class="click"></div>
32+
33+
<!-- sidebar -->
34+
<div class="sidebar">
35+
36+
<!-- title for sidebar -->
37+
<div class="title">
38+
<p>Responsive menu</p>
39+
</div>
40+
<div class="responsive">
41+
<ul class="menu scrollbar">
42+
43+
<!-- simple menu -->
44+
<li>
45+
<span class="name">Translate</span>
46+
<ul>
47+
<li><a href="#">Czech</a></li>
48+
<li><a href="#" class="current">English</a></li>
49+
</ul>
50+
</li>
51+
52+
<!-- dropdown menu -->
53+
<li>
54+
<span class="name">Dashboard</span>
55+
<ul>
56+
<li><a href="#">Home</a></li>
57+
<li class="parent">
58+
<a href="#" class="employ current">Settings</a>
59+
<ul class="submenu">
60+
<li><a href="#">Timezone</a></li>
61+
<li><a href="#">Permissions</a></li>
62+
<li><a href="#" class="employ current">Maintenance</a>
63+
<ul class="submenu">
64+
<li><a href="#">On</a></li>
65+
<li><a href="#" class="current">Off</a></li>
66+
</ul>
67+
</li>
68+
</ul>
69+
</li>
70+
71+
<!-- notice info -->
72+
<li><a href="#">Notice<span class="notice">3</span></a></li>
73+
</ul>
74+
</li>
75+
76+
<!-- dropdown menu -->
77+
<li>
78+
<span class="name">Coments</span>
79+
<ul>
80+
<li><a href="#">New</a></li>
81+
<li class="parent">
82+
<a href="#" class="employ">Settings comments</a>
83+
<ul class="submenu">
84+
<li><a href="#">Disable</a></li>
85+
<li><a href="#">Enable</a></li>
86+
</ul>
87+
</li>
88+
</ul>
89+
</li>
90+
91+
<!-- simple menu -->
92+
<li>
93+
<span class="name">Blog</span>
94+
<ul>
95+
<li><a href="#">Add</a></li>
96+
<li><a href="#">List</a></li>
97+
</ul>
98+
</li>
99+
</ul>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<!-- content wrapper -->
105+
<div class="content-wrapper"></div>
106+
107+
<!-- javascript libraries and plugins -->
108+
<script src="node_modules/jquery/dist/jquery.js"></script>
109+
<script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"></script>
110+
<script src="js/responsive.menu.js"></script>
111+
<script>
112+
$(function() {
113+
new PerfectScrollbar('.scrollbar');
114+
});
115+
</script>
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)