diff --git a/css/style.menu.css b/css/style.menu.css
index 8a06d53..32632bb 100644
--- a/css/style.menu.css
+++ b/css/style.menu.css
@@ -52,6 +52,7 @@
     font-size: 100%;
     list-style: none;
     margin: 0;
+    overflow: hidden;
 }
 
 .sidebar ul.menu li {
@@ -79,21 +80,36 @@
 
 .sidebar ul.menu li ul li ul {
     display: none;
-    margin: 15px 10px;
+    margin: 15px 0 15px 8px;
     padding-left: 10px;
 }
 
 .sidebar ul.menu li ul li.parent a.employ:before {
-    content: "\f106";
     float: right;
     font-family: "FontAwesome";
     margin: 0 3px 0 0;
 }
 
-.sidebar ul.menu li ul li.parent a.employ.active:before {
+.sidebar ul.menu li ul li.parent a.employ.up:before {
+    content: "\f106";
+}
+
+.sidebar ul.menu li ul li.parent a.employ.down:before {
     content: "\f107";
 }
 
+.sidebar ul.menu li ul li.parent a.employ.transition:before {
+    transition: .3s all;
+}
+
+.sidebar ul.menu li ul li.parent a.employ.rotate:before {
+    transform: rotate(180deg);
+}
+
+.sidebar ul.menu li ul li.parent a.employ.rotate-revert:before {
+    transform: rotate(-180deg);
+}
+
 /* perfect scrollbar
    ========================================================================== */
 .scrollbar {
diff --git a/js/responsive.menu.js b/js/responsive.menu.js
new file mode 100644
index 0000000..e7370f7
--- /dev/null
+++ b/js/responsive.menu.js
@@ -0,0 +1,43 @@
+
+/*!
+ * CSS UI - Responsive menu
+ * Copyright Zdeněk Papučík
+ * MIT License
+ */
+(function($) {
+
+
+	// toggle sidebar menu
+	$('.nav .click').on('click', function() {
+		$('.nav .responsive').toggleClass('expandable');
+	});
+
+
+	// init menu
+	$('ul.menu li').each(function() {
+		$(this).parent().find('li.parent a.employ').addClass('up');
+		if ($(this).find('li.parent a.current').length > 0 ) {
+			$(this).parent().find('a.current').addClass('active down');
+			$(this).parent().find('a.current').next('ul.submenu').show();
+		}
+	});
+
+
+	// active menu
+	$('ul.menu li a').on('click', function() {
+		$(this).parent().find('a.employ').toggleClass('active');
+		$(this).next('ul.submenu').slideToggle('fast');
+	});
+
+
+	// click transition
+	$('a.employ').on('click', function() {
+		$(this).addClass('transition');
+		$(this).toggleClass('rotate');
+		if ($(this).parent().find('a.employ').hasClass('down')) {
+			$(this).toggleClass('rotate-revert');
+		}
+	});
+
+
+}(jQuery));
diff --git a/package-lock.json b/package-lock.json
index 4496818..9e4b9d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "css-ui-responsive-menu",
-	"version": "3.1.3",
+	"version": "3.1.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -18,9 +18,9 @@
 			"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
 		},
 		"jquery": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-			"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+			"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
 		},
 		"normalize.css": {
 			"version": "8.0.1",
diff --git a/package.json b/package.json
index 57fc86f..65dae2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "css-ui-responsive-menu",
-	"version": "3.1.3",
+	"version": "3.1.6",
 	"description": "Simple responsive menu.",
 	"main": "css/style.menu.css",
 	"repository": {
@@ -19,7 +19,7 @@
 	"dependencies": {
 		"css-ui-simple": "^2.5.2",
 		"font-awesome": "^4.7.0",
-		"jquery": "^3.3.1",
+		"jquery": "^3.4.1",
 		"open-sans-fontface": "^1.4.0",
 		"perfect-scrollbar": "^1.4.0"
 	},
diff --git a/readme.md b/readme.md
index c953975..4b8ab7b 100644
--- a/readme.md
+++ b/readme.md
@@ -143,31 +143,10 @@ javascript libraries and plugins.
 ```html
 <script src="path/to/jquery.js"></script>
 <script src="path/to/perfect-scrollbar.js"></script>
+<script src="path/to/responsive.menu.js"></script>
 <script>
 	$(function() {
-
-		// perfect scrollbar
-		const ps = new PerfectScrollbar('.scrollbar');
-
-		// click show/hide menu
-		$('.nav .click').on('click', function() {
-			$('.nav .responsive').toggleClass('expandable');
-		});
-
-		// responsive menu
-		$('ul.menu li').each(function() {
-			if ($(this).children('li.parent a.current').length > 0 ) {
-				$(this).parent().find('ul.submenu').toggle();
-				$(this).parent().find('li.parent a.employ').addClass('active');
-			}
-		});
-
-		// responsive active menu
-		$('ul.menu li a').on('click', function() {
-			$(this).parent('li.parent').find('a.employ').toggleClass('active');
-			$(this).parent().find('ul.submenu').slideToggle('fast');
-			$(this).parent().find('ul.submenu ul.submenu').toggle();
-		});
+		var ps = new PerfectScrollbar('.scrollbar');
 	});
 </script>
 ```
diff --git a/responsive.menu.html b/responsive.menu.html
new file mode 100644
index 0000000..190e025
--- /dev/null
+++ b/responsive.menu.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CSS UI - Simple responsive menu</title>
+
+    <!-- css -->
+    <link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
+    <link rel="stylesheet" href="node_modules/perfect-scrollbar/css/perfect-scrollbar.css">
+    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
+    <link rel="stylesheet" href="node_modules/open-sans-fontface/open-sans.css">
+    <link rel="stylesheet" href="node_modules/css-ui-simple/css/cssui.css">
+
+    <!-- css menu -->
+    <link rel="stylesheet" href="css/style.menu.css">
+    <link rel="stylesheet" href="css/style.menu.light.css">
+    <style>
+        body {
+            background: #f2f2f2;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 1.438em;
+        }
+    </style>
+</head>
+<body>
+<!-- nav wrapper -->
+<div class="nav">
+
+    <!-- click show/hide menu -->
+    <div class="click"></div>
+
+    <!-- sidebar -->
+    <div class="sidebar">
+
+        <!-- title for sidebar -->
+        <div class="title">
+            <p>Responsive menu</p>
+        </div>
+        <div class="responsive">
+            <ul class="menu scrollbar">
+
+                <!-- simple menu -->
+                <li>
+                    <span class="name">Translate</span>
+                    <ul>
+                        <li><a href="#">Czech</a></li>
+                        <li><a href="#" class="current">English</a></li>
+                    </ul>
+                </li>
+
+                <!-- dropdown menu -->
+                <li>
+                    <span class="name">Dashboard</span>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li class="parent">
+                            <a href="#" class="employ current">Settings</a>
+                            <ul class="submenu">
+                                <li><a href="#">Timezone</a></li>
+                                <li><a href="#">Permissions</a></li>
+                                <li><a href="#" class="employ current">Maintenance</a>
+                                    <ul class="submenu">
+                                        <li><a href="#">On</a></li>
+                                        <li><a href="#" class="current">Off</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+
+                        <!-- notice info -->
+                        <li><a href="#">Notice<span class="notice">3</span></a></li>
+                    </ul>
+                </li>
+
+                <!-- dropdown menu -->
+                <li>
+                    <span class="name">Coments</span>
+                    <ul>
+                        <li><a href="#">New</a></li>
+                        <li class="parent">
+                            <a href="#" class="employ">Settings comments</a>
+                            <ul class="submenu">
+                                <li><a href="#">Disable</a></li>
+                                <li><a href="#">Enable</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+
+                <!-- simple menu -->
+                <li>
+                    <span class="name">Blog</span>
+                    <ul>
+                        <li><a href="#">Add</a></li>
+                        <li><a href="#">List</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- content wrapper -->
+<div class="content-wrapper"></div>
+
+<!-- javascript libraries and plugins  -->
+<script src="node_modules/jquery/dist/jquery.js"></script>
+<script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"></script>
+<script src="js/responsive.menu.js"></script>
+<script>
+    $(function() {
+        new PerfectScrollbar('.scrollbar');
+    });
+</script>
+</body>
+</html>