diff --git a/composer.json b/composer.json deleted file mode 100644 index b18574c..0000000 --- a/composer.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "require": { - "npm-asset/css-ui-simple": "^2.4.0", - "npm-asset/open-sans-fontface": "^1.4.0", - "npm-asset/jquery": "^3.3.1", - "npm-asset/font-awesome": "^4.7.0", - "npm-asset/perfect-scrollbar": "^1.4.0" - }, - "config": { - "fxp-asset": { - "ignore-files": { - "npm-asset/normalize.css": [ - "*.md" - ], - "npm-asset/css-ui-simple": [ - "css/src/", - "*.md" - ], - "npm-asset/open-sans-fontface": [ - "sass", - "*.html", - "*.less", - "*.scss", - "*.md" - ], - "npm-asset/jquery": [ - "src", - "external", - "*.txt", - "*.md" - ], - "npm-asset/font-awesome": [ - ".*", - "*.txt", - "less", - "scss", - "*.md" - ], - "npm-asset/perfect-scrollbar": [ - "src", - "types", - "*.md" - ] - }, - "installer-paths": { - "npm-asset-library": "www/assets" - } - } - } -} diff --git a/css/style.menu.css b/css/style.menu.css index 5400f69..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 15px 0 0; + margin: 0 3px 0 0; +} + +.sidebar ul.menu li ul li.parent a.employ.up:before { + content: "\f106"; } -.sidebar ul.menu li ul li.parent a.employ.active:before { +.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 { @@ -104,6 +120,10 @@ width: 5px; } +.ps__rail-y { + margin: 10px 0; +} + .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { 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 new file mode 100644 index 0000000..9e4b9d8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,41 @@ +{ + "name": "css-ui-responsive-menu", + "version": "3.1.6", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "css-ui-simple": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/css-ui-simple/-/css-ui-simple-2.5.2.tgz", + "integrity": "sha512-3mVIvm6pFbaMKNbPPmEFg8xzFMXSfFOFcMGmNZtoEPFEziYZ4XIdDEAxemEaggQQ++B2OXV85BqMAOPtYbAazA==", + "requires": { + "normalize.css": "^8.0.1" + } + }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, + "jquery": { + "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", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, + "open-sans-fontface": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/open-sans-fontface/-/open-sans-fontface-1.4.0.tgz", + "integrity": "sha1-A8xtG/XmqLW0eRCIhWL3IsXdNCg=" + }, + "perfect-scrollbar": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz", + "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw==" + } + } +} diff --git a/package.json b/package.json index 6b47bdc..65dae2e 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "css-ui-responsive-menu", - "version": "3.0.8", - "description": "Simple responsive sidebar menu.", - "main": "project", + "version": "3.1.6", + "description": "Simple responsive menu.", + "main": "css/style.menu.css", "repository": { "type": "git", "url": "git+https://accgit@github.com/css-ui/responsive-menu.git" @@ -17,10 +17,10 @@ "url": "https://github.com/css-ui/responsive-menu/issues" }, "dependencies": { - "css-ui-simple": "^2.4.0", - "open-sans-fontface": "^1.4.0", - "jquery": "^3.3.1", + "css-ui-simple": "^2.5.2", "font-awesome": "^4.7.0", + "jquery": "^3.4.1", + "open-sans-fontface": "^1.4.0", "perfect-scrollbar": "^1.4.0" }, "homepage": "https://github.com/css-ui/responsive-menu#readme" diff --git a/readme.md b/readme.md index 8a43b20..4b8ab7b 100644 --- a/readme.md +++ b/readme.md @@ -1,16 +1,11 @@ -## Responsive menu +## CSS UI - Responsive menu Simple responsive sidebar menu. -## Requirements - -- composer -- [NPM/Bower Dependency Manager for Composer](https://github.com/fxpio/composer-asset-plugin) - ## Installation ``` -composer install +npm install --save css-ui-responsive-menu ``` ## Demo @@ -29,20 +24,27 @@ CSS dependencies. ``` -CSS menu style. + +CSS menu. ```html ``` -CSS light or dark theme for menu. Choose one. +CSS light or dark theme. Choose one. ```html ``` -Simple menu pattern. +Use Open Sans fotns. + +```css +font-family: 'Open Sans', sans-serif; +``` + +Simple menu html. ```html @@ -78,7 +80,7 @@ Simple menu pattern. ``` -Dropdown menu pattern. +Dropdown menu html. ```html @@ -106,6 +108,15 @@ Dropdown menu pattern.
  • Germany
  • France
  • Italy
    • + + +
  • + Click + +
    • @@ -121,43 +132,23 @@ Dropdown menu pattern. ``` -## Notice info +Notice info. ```html
  • Notice3
    • ``` -## javascript libraries and plugins +javascript libraries and plugins. ```html + ``` -Enjoy the menu. +Enjoy responsive menu. 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 @@ + + + + + + CSS UI - Simple responsive menu + + + + + + + + + + + + + + + +
    + + +
    + + +
    + + +
    +

    Responsive menu

    +
    +
    + +
    +
    +
    + + +
    + + + + + + + +