Jamie Balfour'sPersonal blog
Version 1.3 of BalfBar is here and it's is by far the cleanest, simplest, and most beautiful version of the amazing responsive menu bar that I have developed to date.
A major new feature has now finally made it into it. So not only can you have dropdowns in the desktop mode, but you can now have what I call mega menus (previously content menus). These menus are able to contain more than just a list of items - they can contain anything, for example, a login form, a dropdown box - whatever you like. Further to that, to retain compatibility with existing implementations, the mega menu no longer requires the whole menu to follow that pattern and can be nicely mixed with existing dropdowns!
This is not all I have brought to the menu that is now used on all of the websites I have developed. I have brought many new features to the SCSS file that include the ability to have the top items display differently to the internal items as was the case on my own website. There are other minor changes, mainly focused on the SCSS file to make it easier to tailor it to your website.
Also coming soon to BalfBar with BalfBar 1.3 is the megamenu. I have already got a few of these working how I'd like them to but need to add in an option for mobile before it is released.
Version 1.3 of BalfBar is now available to download and brings a general set of improvements and new features. I'm still working on the tidy up of BalfBar as a major project but that's for another update still to come which I'm looking forward to ðŸ¤ª . The joys of being a software developer all over again ðŸ˜‚.
The new version of BalfBar brings in a new kind of menu which is known as the mobile pushmenu. You can see this below:
As you can see, this pushes the whole document across to the right. At present, much like the sidebar, it only comes from the left hand side.
- $(window).width() >= 800px is not the same as @media screen and (min-width: 800px)
- window.innerWidth is also not the same
- window.outerWidth is also not the same
It's been a while since I last worked on BalfBar but the latest improvement is a huge one! The latest update is version 1.2.
The newest BalfBar release brings a bunch of changes. Most important changes are removals which now includes the floating logo (BalfBar shouldn't manage this) and the Dark Mode (later named Alternate Mode).
Let's start with why the floating logo / logo base idea was removed. In fact, let's start with why it came to BalfBar in the first place. Many of you will remember that I used the floating logo on my own website. This was removed in about 2015 when I changed to simply have my name. No body who used BalfBar that I know of was using this feature and more importantly, BalfBar shouldn't need to deal with minor things like this. It's removal was obvious and it makes the SCSS file much easier to understand.
Next, Dark Mode. One of the oldest features of the menu was Dark Mode, originally inspired by Mac OS X when it offered us a dark menu bar etc. I became a fan and decided to upgrade my own menu (powered by jQuery Smart Menus) to have this feature. When I developed BalfBar to replace it on my website I had to include the feature. Now I realise that even I don't use this feature. The main reason for it's removal is that firstly it complicates the SCSS file, secondly it will increase the CSS output file considerably and thirdly it can easily be added if needed by just compiling two SCSS files with the different themes anyway.
The SCSS file is now completely cleaned up and ready to use again. I'm also working on adding some new menu types to it including a large menu like I used to have. This will be sometime before it is ready though since my other projects are now taking precedence again.
I have now updated the JS file to work much more fluidly. However, no longer does BalfBar add a fixed_menu class to the HTML but only to the menu. This came from the idea that it's possible that two menus maybe on the same document at the same time, causing both to go to 'fixed mode'. It also allow it to remain more clean and succinct.
One more thing about the new change is that there is now both a desktop and mobile fixed height option. This also means the removal of the permanent mobile created in the CSS. To make a BalfBar instance always mobile, use -1 as normal.
Another major update has come to BalfBlog in the form of being able to export your database from the dashboard. This is a very powerful feature and one that I personally really wanted for some time. I'm also configuring a backup system that will create an archive each and every time you post something to your blog. This is a very useful feature for ensuring you always have a backup of the database if you did something wrong or your server stopped working (since you could have a download of it first).
I would like to add that the new plugin system for the tools is now in place and it's easy enough to use. I will be opening up a new sample database on my own website soon as well.
I'm also working on a new information architecture to make BalfBlog more expandable. One of these possible expansions is built in polling, in other words, at the end of a post a poll would appear which readers can then answer.
Since many of us, including myself, like a bit of customisation with every little thing we use, BalfBar's next update will bring more optional items to the table. The core has been designed to make it easy to bring new features to it very quickly and by the end of tomorrow the new sidebar mode will be in place on the latest version.
The sidebar option allows you to have a mobile sidebar menu as opposed to a dropdown menu. This fantastic option is already in place on my website, so resize the page to test it. I find that this option offers more accessibility options and it's much better for larger menus. I'm focusing on improving it in the next few days however, so please suggest any positive and negatives about this design using the usual contact page.
BalfBar has had a significant improvement to make it even easier to get your website the way you want it. You can now forget about setting the height when BalfBar becomes a fixed menu - it figures it out itself. Now all you need to do is tell it you want it to check for this and it will make the decision as to when to float the menu.