Slim Side/Navigation Bar (Optional Dropdown Menu Included)

   (0 reviews)

Before we get into this, I'm using FontAwesome for my icons, but this could easily be converted to use another glyph font with a little bit of ingenuity and know-how. Some of the codes might look a little complicated, but I'd say this is more beginner-friendly. Basically, if you can style a div/post template with a bit of CSS, you can 100% get this working. As long as you leave the script as-is, and don't tinker with the HTML structure too much, it should be pretty hard to break so there's no need to worry about that!

Now, I'm terrible at explanations, so here's a quick gif of what our end result will be when you hover/tap on the icon:

Of course, you'll want to add your own styling to all of this, but I'm going to be leaving out anything that isn't necessary to make this work just to make things a little easier. Now, let's have a look at the base code for all of this. The HTML:

<div class="sidebar">
<a href="#"><i class="fas fa-comments">Messages</i></a>
</div>

The CSS:

.sidebar a { font-size: 0px; }
.sidebar .fas:before { font-size: 20px; }
.sidebar a:hover .fas, .sidebar a:focus .fas { font-size: 0.7rem; }
.sidebar a:hover .fas:before, .sidebar a:focus .fas:before { font-size: 0px; }

All we're doing is taking advantage of how FontAwesome actually inserts icons into the page, and playing with font sizes to make the icon swap out for the text when you hover over it. ".sidebar a" is your actual text, ".sidebar .fas:before" is for the FontAwesome icon, and ".sidebar a:hover .fas" makes the magic happen on mobile as well. This will give you a single icon hover, but you can add more quite easily by simply duplicating the link bit and changing "fa-comments" and "Messages" to the appropriate things. Yeah, its that simple!

Now, the guide description promised a dropdown/toggle menu too, so let's look at the coding for that next. Our HTML will be changing a little to this instead:

<div class="sidebar">
	<div class="dropdown"><a class="dropdown-link"><i class="fas fa-comments">Messages</i></a>
		<div class="dropdown-container" style="display: none;">Dropdown/Menu Contents</div>
	</div>
</div>

The script:

$(document).ready(function() {
	$('div.dropdown').each(function() {
		var $dropdown = $(this);
		$("a.dropdown-link", $dropdown).click(function(e) {
			event.stopPropagation();
			$div = $("div.dropdown-container", $dropdown);
			$div.toggle();
			$("div.dropdown-container").not($div).hide();
			return false;
		});
	});
	$('html').click(function() {
		$("div.dropdown-container").hide();
	});
});

The CSS doesn't change much, except for the ".sidebar a" line, which needs to be changed to this:

.sidebar a { font-size: 0px; cursor: pointer; }
.dropdown-container { MENU STYLING HERE }

Now to explain how this one works! Its simpler than it looks, I promise. The wrapper div, "dropdown", is there so you can have multiple dropdowns that don't wreak havoc on each other, and that "display: none" inline style is the crux to making everything show/hide when you click on it. Yeah, its a bit messy to do it this way, but again, its there to keep each section of the dropdown isolated and putting it in the CSS can cause some wonkiness to happen. As for adding "cursor: pointer" to the CSS, this is to fix a quirk with the jQuery, which is dependent on the <a> (link) tag to work in our case. We're basically disabling the link to hijack it for our own purposes instead of going to a new page, and without that, the user's cursor won't switch to the little hand that indicates that you can click on something, so we need to restore that to eliminate confusion. And that's it! You've got a working menu now!

Before I send you on your way, there's a few quick notes that didn't quite fit elsewhere:

• Including code to shift over the main portion of your site's page is too complex for this guide, as it'll entirely depend on how your site is structured. I'd suggest just applying a z-index to .dropdown-container so it doesn't get buried under everything else.
• The dropdown menu code can be used independently of the icon switching code if you prefer. Just take the modified HTML and script, and style it how you like. It functions identically to Bootstrap dropdown menus with a fraction of the code. A little bit of craftiness can also turn this into a modal-style popup if you'd prefer that instead.
• Both the navigation bar and dropdown will display horizontally by default, but can easily styled to work vertically with a few lines of code.

Feel free to post links to the cool stuff you've done with the code. I love seeing stuff like that! Oh, and if you hit any snags, reach out and I'll do what I can to help you fix things.