Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Slim Side/Navigation Bar (Optional Dropdown Menu Included)
   (0 reviews)

ThriftStoreTeeth
  • Every site needs navigation, right? What about something using icons/glyph fonts, and some funky hover effects in place of tooltips to give your site a unique look? Oh, it works on mobile, is dead simple to convert to a dropdown or toggle menu with a touch of script, and is super light on code too? Let's do it!

    Type: Look & Feel Software: Other

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:

GIF.gif.71be29879a579463ee22a6c52eb8e920.gif

 

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.




User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.