Have you used SMINT in a project? Id love to see what you've done. Id like to put together a gallery of the best SMINT website, with links back to the designers/developers, so if you have a great example of a SMINT powered website, send me a message on twitter @rabmyself
Sticky Menu Including Navigation Thingy
SMINT is a simple plugin for lovers of one page websites
News!
SMINT V3 is finally here! No, really it is!
Finally got, a some downtime to have a look and update a few of the bugs and rework how it functions slightly.
One of the main changes is that you no longer have to give you links an Id, you can just use a # as the href, such as href="#section1". Just make sure you have a div with a class of section1.
The annoying bug of the menu bar sticking down the page when refreshed has been removed, though I havent been able to thoroughly test this yet, but it seems to work as intended. If anyone knows otherwise, send me a message on twitter @rabmyself
Added the ability to make internal links scroll the sections too by adding the class 'intLink'.
If you have links in your main menubar that you want to link to an external site, just add the class 'extLink'.
Its not 100% perfect, but its improving!
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 your menu and give it a class name. For my example, im using .subMenu. Inside this you put your 'a' tags and give each one a hash link. By this I mean set the href to #section1. Change #section1 to be whatever you are going to call your section, but you must include the # at the start. Do this for each of your links.
Next, create your sections and add a class to each of them. The class names must match the # of the 'a' links you created above. So if your first link has an href of #section1 you then add the class .section1 to your first div. Repeat this for each link you have.
Add jQuery and jquery.smint.js to the head section of your page
You can replace .subMenu with the class name of your menu
To give you a little more flexability, the class .fxd gets added to your menu when it becomes fixed to the top of the screen, allowing some extra styling 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.
Call the function with the following script:
$(document).ready( function() {
$('.subMenu').smint();
});
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.
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.
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