├── README.md ├── dist ├── bootstrap-better-nav.css ├── bootstrap-better-nav.js ├── bootstrap-better-nav.min.css └── bootstrap-better-nav.min.js ├── images ├── demo.gif ├── link-external.png └── paste-url.png └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Better Nav 2 | 3 | ### Tiny library that replaces the default Bootstrap navbar collapse with an elegant off-screen menu. 4 | 5 | No configuration and no additional HTML markup required. Just include the library's JavaScript and CSS files, and your new navigation is ready. 6 | 7 | ![Demo](https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/master/images/demo.gif) 8 | 9 | ## Installation 10 | 11 | The library works only in Bootstrap 4 projects and requires a valid Navbar to be present on the page. 12 | 13 | To use it, simply include its CSS and JavaScript in your HTML. You can find the necessary files in the `/dist` directory of this project. CDN versions are also available via unpkg. 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Once the JavaScript is included in the page the library is automatically enabled. A new off-screen menu is added to the HTML, which is synced with the contents of your navbar automatically. 24 | 25 | ```html 26 | 32 | ``` 33 | 34 | Clicking on the navbar toggle button will show the off-screen menu instead of expanding the Bootstrap navbar. 35 | 36 | The menu has only basic styling, you can easily customize it with CSS. 37 | 38 | ## Configuring menu direction 39 | 40 | The slide-in menu can be positioned on the left or the right side of the screen. By default it is on the right, but that can be easily changed by adding the `better-bootstrap-nav-left` class to the Bootstrap navbar. 41 | 42 | ```html 43 |

44 | ``` 45 | 46 | 47 | ## Using in Bootstrap Studio 48 | 49 | To add this plugin to your Bootstrap Studio project, simply go to the Design panel (bottom-right) and add the needed resources. 50 | 51 | In Styles add the CSS part of the library as an external link. 52 | 53 | ![Demo](https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/master/images/link-external.png) 54 | 55 | A dialog window should open. Inside, paste the CSS URL from the [Installation](https://github.com/bootstrapstudio/bootstrap-better-nav#installation) guide. 56 | 57 | ![Demo](https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/master/images/paste-url.png) 58 | 59 | Repeat this process for the JavaScript part of the library. 60 | -------------------------------------------------------------------------------- /dist/bootstrap-better-nav.css: -------------------------------------------------------------------------------- 1 | body.overflow-hidden { 2 | overflow:hidden; 3 | } 4 | 5 | #side-menu { 6 | display:none; 7 | position:fixed; 8 | width:300px; 9 | top:0; 10 | right:-300px; 11 | height:100%; 12 | overflow-y:auto; 13 | z-index:1035; 14 | background:#fff; 15 | padding:20px 30px; 16 | color:#333; 17 | transition:0.4s; 18 | } 19 | 20 | body.side-menu-visible #side-menu { 21 | transform:translateX(-300px); 22 | } 23 | 24 | #side-menu .contents { 25 | margin-top:15px; 26 | } 27 | 28 | #side-menu .nav-link { 29 | color:#333; 30 | font-size:16px; 31 | font-weight:600; 32 | padding:12px 0; 33 | } 34 | 35 | #side-menu .nav-link:hover { 36 | opacity:0.8; 37 | } 38 | 39 | #side-menu .close { 40 | font-size:36px; 41 | font-weight:normal; 42 | } 43 | 44 | .side-menu-overlay { 45 | position:fixed; 46 | left:0; 47 | top:0; 48 | min-width:100%; 49 | height:100%; 50 | background:rgba(0,0,0,0.4); 51 | z-index:100; 52 | display:none; 53 | } 54 | 55 | #side-menu.side-menu-left { 56 | right: auto; 57 | left: -300px; 58 | } 59 | 60 | body.side-menu-visible #side-menu.side-menu-left { 61 | transform:translateX(300px); 62 | } 63 | 64 | -------------------------------------------------------------------------------- /dist/bootstrap-better-nav.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | var body = $('body'); 4 | var navbar = $('.navbar'); 5 | var navbarCollapse = $('.navbar-collapse'); 6 | 7 | 8 | 9 | // Add the needed HTML elements for the plugin to work. 10 | // All the elements are styled in navbar-sidemnu.css. 11 | 12 | body.append(''); 13 | var overlay = $('.side-menu-overlay'); 14 | 15 | body.append(''); 16 | var sideMenu = $('#side-menu'); 17 | 18 | sideMenu.append('') 19 | var sideMenuCloseBtn = sideMenu.find('.close'); 20 | 21 | sideMenu.append('

') 22 | var sideMenuContents = sideMenu.find('.contents'); 23 | 24 | 25 | 26 | // Configure Slide menu direction 27 | if(navbar.hasClass('better-bootstrap-nav-left')) { 28 | sideMenu.addClass('side-menu-left'); 29 | } 30 | 31 | 32 | // This event is trigerred when the user clicks the navbar toggle button. 33 | 34 | navbarCollapse.on('show.bs.collapse', function (e) { 35 | // Stop the default navbar behaviour (don't open the collapse navigation). 36 | e.preventDefault(); 37 | 38 | // Instead we copy the navbar contents and add them to our side menu. 39 | var menuContent = $(this).html(); 40 | sideMenuContents.html(menuContent); 41 | 42 | // Animate the side menu into frame. 43 | slideIn(); 44 | }); 45 | 46 | 47 | // Hide the menu when the "x" button is clicked. 48 | 49 | sideMenuCloseBtn.on('click', function(e) { 50 | e.preventDefault(); 51 | slideOut(); 52 | }); 53 | 54 | // Hide the menu when the overlay element is clicked. 55 | 56 | overlay.on('click', function(e) { 57 | slideOut(); 58 | }); 59 | 60 | // Listen for changes in the viewport size. 61 | // If the original navbar collapse is visible then the nav is expanded. 62 | // Hide/Show the menu accordingly. 63 | 64 | $(window).resize(function(){ 65 | if(!navbarCollapse.is(":visible") && body.hasClass('side-menu-visible')) { 66 | sideMenu.show(); 67 | overlay.show(); 68 | } 69 | else { 70 | sideMenu.hide(); 71 | overlay.hide(); 72 | } 73 | }); 74 | 75 | function slideIn() { 76 | body.addClass('overflow-hidden'); 77 | sideMenu.show(); 78 | setTimeout(function() { 79 | body.addClass('side-menu-visible'); 80 | overlay.fadeIn(); 81 | }, 50); 82 | } 83 | 84 | function slideOut() { 85 | body.removeClass('side-menu-visible'); 86 | overlay.fadeOut(); 87 | setTimeout(function() { 88 | sideMenu.hide(); 89 | body.removeClass('overflow-hidden'); 90 | }, 400); 91 | } 92 | }); 93 | -------------------------------------------------------------------------------- /dist/bootstrap-better-nav.min.css: -------------------------------------------------------------------------------- 1 | #side-menu,.side-menu-overlay{position:fixed;top:0;height:100%;display:none}body.overflow-hidden{overflow:hidden}#side-menu{width:300px;right:-300px;overflow-y:auto;z-index:1035;background:#fff;padding:20px 30px;color:#333;transition:.4s}body.side-menu-visible #side-menu{transform:translateX(-300px)}#side-menu .contents{margin-top:15px}#side-menu .nav-link{color:#333;font-size:16px;font-weight:600;padding:12px 0}#side-menu .nav-link:hover{opacity:.8}#side-menu .close{font-size:36px;font-weight:400}.side-menu-overlay{left:0;min-width:100%;background:rgba(0,0,0,.4);z-index:100}#side-menu.side-menu-left{right:auto;left:-300px}body.side-menu-visible #side-menu.side-menu-left{transform:translateX(300px)} -------------------------------------------------------------------------------- /dist/bootstrap-better-nav.min.js: -------------------------------------------------------------------------------- 1 | $(function(){function e(){s.addClass("overflow-hidden"),o.show(),setTimeout(function(){s.addClass("side-menu-visible"),d.fadeIn()},50)}function n(){s.removeClass("side-menu-visible"),d.fadeOut(),setTimeout(function(){o.hide(),s.removeClass("overflow-hidden")},400)}var s=$("body"),i=$(".navbar"),a=$(".navbar-collapse");s.append('');var d=$(".side-menu-overlay");s.append('');var o=$("#side-menu");o.append('');var t=o.find(".close");o.append('

');var l=o.find(".contents");i.hasClass("better-bootstrap-nav-left")&&o.addClass("side-menu-left"),a.on("show.bs.collapse",function(n){n.preventDefault();var s=$(this).html();l.html(s),e()}),t.on("click",function(e){e.preventDefault(),n()}),d.on("click",function(e){n()}),$(window).resize(function(){!a.is(":visible")&&s.hasClass("side-menu-visible")?(o.show(),d.show()):(o.hide(),d.hide())})}); -------------------------------------------------------------------------------- /images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/61c69fc54af82b99a17c51ca53655b30dd6c2769/images/demo.gif -------------------------------------------------------------------------------- /images/link-external.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/61c69fc54af82b99a17c51ca53655b30dd6c2769/images/link-external.png -------------------------------------------------------------------------------- /images/paste-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bootstrapstudio/bootstrap-better-nav/61c69fc54af82b99a17c51ca53655b30dd6c2769/images/paste-url.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@bootstrapstudio/bootstrap-better-nav", 3 | "version": "1.3.1", 4 | "description": "Off-screen navigation menu for Bootstrap.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "keywords": [ 11 | "bootstrap", 12 | "navbar", 13 | "navigation" 14 | ], 15 | "repository" : { 16 | "type" : "git" 17 | , "url" : "https://github.com/bootstrapstudio/bootstrap-better-nav.git" 18 | }, 19 | "license": "ISC" 20 | } 21 | --------------------------------------------------------------------------------