Tweet

sticky menu including navigation thingy

SMINT is a simple plugin for lovers of one page websites

SMINT v2.0 has now been released (finally)!

Got a few hours spare this week to put it together. Ive had great feedback on this simple plugin, so thanks to everyone who has been sharing the love!

I've had some brilliant suggestions and lots of people extending the plugin, some of which has been incorporated into v2.0. Special thanks go out to Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy) whose additions have been incorporated into the main download.

So whats new then?

The main addition is the addition of active states on the nav when you scroll down the page.

As you scroll, the class 'active' is added to the link of the section you are viewing. Also incorporated a disbale class, just in case there are some links in your nav that dont scroll, perhaps link to an external site or launch a pop etc. Just add the class 'smint-disable' to a link

I'll be putting together a more detailed tutorial on how to set it up, and explaining things a little more, so stay tuned!


What exactly does it do again?

Smint is a simple jQuery plugin that helps with the navigation on one page style websites.

It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.


So how do I use it?

Create a 'div' for your menu and give it a class name.

Inside this you put your 'a' tags and give each one an #id. This is your menu wrapper and it should be set to position:absolute

Next, add a class to each of the sections of your one page site. The class names must match the #ids of the 'a' links you created above. So if your first link has an id of #section1 you then add the class .section1 to your first div. Repeat this for each link you have.

Add jQuery to the head section of your page

Add the jquery.smint.js to the head section of your page

Call the function with the following script:

$(document).ready( function() {
$('.subMenu').smint();
});

You can replace .subMenu with the class name of your menu

To give you a littl emore flexability, the class.fxd gets added to your menu when it becomes fixed to the top of the screen, allowing some extra styleing to be added if needed.

Options

SMINT is a simple plugin, so only has an option for how fast the page scrolls.

$('.subMenu').smint({
'scrollSpeed' : 1000
});

The default speed is 500 (half a second) but you can now set that to be whatever you like.


 

Demo

This page is a demo in itself!

But you can go to the standalone, skeleton demo page which has all the basic functions and minimal styling.

View Demo


Download Smint NOW!
OMG its free!

The download comes with demo included so feel free to use that as a staring template for your own one page website.

Dwonload SMINT


 

About Me

My name is Robert McCracken and I'm a web designer based in Belfast. Been doing this for over 10 years and SMINT is my first dip into a jQuery plugin!

So if any jQuery wizards out there want to rip this apart and tell me how bad it is or suggest ways to improve it, Id love to get some constructive criticism as it is my first plugin!

And if you use SMINT in one of your projects, feel free to drop me a message on twitter @rabmyself and say hello!

SMINT is released under the MIT creative commons License