BalfBar is an extremely lightweight menubar built with JavaScript and SCSS so that customisation is easy! You can enjoy this menu from my website at no cost. It is a part of my Web Independently Styled Project.
My menu is designed to be similar to jQuery SmartMenus but with a different approach. My thought initially when I used SmartMenus was that it was rather large. I personally used and liked the BootStrap theme, but due to the fact that it was using all of the BootStrap library in the CSS files, I found that it was rather large and difficult to update.
I decided on the 15th of September 2015, as part of my own website restructure, I would build my own menu.
Getting started
It's so easy to get started with BalfBar now that it is fully implemented as a jQuery plugin. Once the SCSS file is compiled and is saved in a location accessible by the webpage, the next thing that is needed is the JavaScript. First ensure you have jQuery 1.10 or later:
... <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <link href="balfbar.css" rel="stylesheet" type="text/css"> ... </head> <body> <nav> <div class="balfbar desktop_dropdown mobile_sidebar"> <div class="menu"> <div class="mask"></div> <div class="brand">Website example</div> <div class="menu_button"> <div class="select"> <div> <div></div> <div></div> <div></div> </div> </div> </div> <div class="item_holder"> <ul class="items"> <li> <a href="/"> <span> Home </span> </a> </li> <li> <a href="/about/"> <span> About </span> </a> <ul class="dropdown"> <li> <a href="/about/me/"> <span> About me </span> </a> </li> <li> <a href="/about/site/"> <span> About my website </span> </a> </li> </ul> </li> </ul> <div class="search_wrapper"> </div> </div> </div> <div class="media_tester"></div> </div> </nav> </body> ...
On the subject of stylesheets, I provide a compiled version of the style used on this sample page and indeed the one on my personal website, but you most likely want to compile the SCSS file so that it works better with your website. This is how Jambour Digital ltd. operate with BalfBar which is on every single website we have created.
Crucially, this is designed to be incredibly lightweight.
I think defering until the document is ready
is the best way to load BalfBar, but that choice is yours. Continuing in the head
element, open a new script
and put the following code in it:
$(document).ready(function(){ $("#menu").BalfBar(); });
Functions are bound within the plugin to specific events which will trigger automagically. There is no need for you to change any of this. See the setup page for more information on how to customise the jQuery options.
Sample HTML
Versions and updates
The following describes the changes in each version:
In November 2017 I released version 1.2. This has modest changes to the system but it also removes quite a few things.
Firstly, logo-base is gone. No longer does BalfBar provide a hanging logo option as this can be done very easily with CSS anyway.
Secondly, I've removed the jQuery DesktopOptions and MobileOptions objects from the default options as it meant that an object with these values would need to be passed through complicating the system.
Thirdly, the fixed menu option can be set entirely from JavaScript. No longer is it limited to CSS. Also the mobile menu no longer needs to be fixed.
Finally, I added the mega menu option to the menu system. It's easy to use as all you need to do is change the DesktopMenuType value in the options to 'megamenu'.
Released in June 2019, version 1.3 focuses on cutting down the size of BalfBar removing more features that are unneccessary for the majority of users.
BalfBar 1.3 also added a CSS fallback for dropdowns in the menu, replaced the search_wrapper with a right_zone class and improved the dropdown animation.
BalfBar 1.3 also added the megamenu dropdown and left_shift and right_shift classes
BalfBar 1.4 adds better styling and tidying of the SCSS file as well as nicer animations and a new top-down design, as well as new performance improvements in the JavaScript
BalfBar 1.5 is the most significant change since the very beginning. It no longer supports the .hover class, and no longer does it add this class to items. This improves performance as it moves this to CSS instead of JavaScript. The SCSS file has been updated to reflect this new change.
1.5 also removes JavaScript based animations and moves them back to CSS instead, this again improves the performance and makes the loading quicker.
As part of my own continuing commitment to improving BalfBar, I aim to provide more and more updates as needed. There are few glitches then need ironed out and I will get to them soon.
License
BalfBar is, as with all of my projects in my Web Independently Styled Project, free to use. The source code is available on request, but by default, the file included is minified but non-minified source code can be given on request (I cannot be bothered updating my website with the latest each time).
Plans
I feel that BalfBar is pretty much finished now and will not need to add anything else to it. Let me know what you think in the comments.
Downloads
I provide by both the SCSS file and the JavaScript here. I cannot promise to keep this up to date. You will need an SCSS compiler to compile this.
Generator
I have now included the Jambour Digital ltd. BalfBar Generator within my website.
