BalfBar

A bit about BalfBar...

Welcome to the page on BalfBar. At the top of this page is an example menu using BalfBar.

This is my lightest weight menu I have ever built and is built with SCSS so that customisation is easy! You can enjoy this menu from my website at no cost.

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.

First ensure you have jQuery 1.10 or later and a copy of the stylesheet:

HTML

  ...
  <head>
      ...
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <link href="balfbar.css" rel="stylesheet" type="text/css">
      ...
  </head>
  ...

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.

Crucially, BalfBar is 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:

JavaScript

  $(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.

This is a special dropdown

BalfBar

A bit about BalfBar...

Getting started