Smint.js – A simple plugin for lovers of one page websites
If you are a fan of one page websites, you are probably aware of different ways of achieving it. Today, we would like to present you SMINT – a simple plugin for lovers of one page websites. It offers a single page website solution having 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.
How to use?
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 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.
That’s brilliant Petia. i wonder if some easing in and out could be written so that the scrolling accelerates and then decellerates. That would be smooth
Thanks for that, Tim. Easing makes sense and you are right it will be smoother if applied. I will give it a try and see what happens. Will update on the result. Thanks for visiting.
definitely agree on the easing : ) good work Petia.
Great idea! Can I use it horizontally as well?
Hi Pamela, I haven’t tried it horizontally, but I do not see why not.I think it is a matter of styling. You mean the menu only, right?
I mean scrolling the whole web horizontally, I’m currently finishing this website:
http://nazer.urucas.com
And I had a few projects like that one that are one page websites but scrolling horizontally instead of vertical, just wondering if I could make use of your plugin for the next one no matter the orientation.
Thanks!
Wow, totally great website. I really like the style. I will give it a try this weekend, hopefully, it will work out well. Will let you know. Thanks for the idea and stopping by.
Great! Let me know if you need a hand. Do you have it on github?
Smint is actually created by Robert McCracken and he is open to suggestions and improvements which is great. I will give it a try and contact Robert to see if he is ok with putting it on github. Whatever happens, I will update you:) I will let you know if I need help:)) Thanks very much, Pamela!
How can we highlight the menu ? For eg If I click on Section 3 on the top menu bar , it should be highlighted. We can do this in jQuery by adding a css class on on clik event, but If I scroll manually to section 3 using mouse or arrow keys how can we highlight the section3 on top menu bar
Can this be useful? http://jsfiddle.net/m2zQE/
Hi Petia, exactly what Iam looking for, Thanks a lot.
I am happy, I can help. Thanks for visiting, Ramana:)
Is it possible to make each section the same height as the screen? I mean, make it so the section takes up the full screen? For me on my MBA it doesn’t go all the way to the bottom.
Hi Tim,
This is a tricky part, I could say. As when setting up the height you should be aware of the different screen sizes. As tablet and 27inch monitor will display sections differently e.g. tablet will display 500px and montior over 1000px. Personally, to be on the safe side, I would set the height of the elements (s1,s2,s3..etc..) to be between 1100 – 1200px, as with 1200px you can be sure that it will be displayed one section at a time. I hope it helps:) Thanks for visiting.
It works on first load, but try to scroll down to the middle, refresh the page and scroll up
try this on: http://www.outyear.co.uk/smint/
any idea?
hello again.
sorry for double posts but i have a second important question
what about with href links in sections? i need something like this-> alvarotrigo.com/fullPage/
(for example – when you click Second slide, we will see link href http://www……….com/#secondPage)
its good for SEO
I love this template… exactly what I was lookign for thanks 🙂
Is there a way of making the background colour of the sections span 100% width of the page whilst still keeping the content confined to a 960px wrap?
Thanks again 🙂
lolekzehej
Hey, I gave it a try but nothing works. The menu seems to stick on the last position you have been. Any luck?
lolekzehej not sure about that, I will give it a try.
nataliecockrill
Hey,
Just remove “max-width: 1140px; min-width: 960px;” from .subMenu, .wrap and .section but do not remove the width from .inner and you should be ok. http://awesomescreenshot.com/0282bz2jcf
I hope it helps.
lolekzehej you can use this js to fix it: http://wklej.org/id/1281904/ it will go to top of the page on refresh.
Hi. Is there a way to add a floating submenu to one of the menu items? I am searching about that but I am not figuring it out. Thank you.
Hey there,
To add a submenu to one of the main menu items, a whole structure has to be rewritten in a way to have a proper ul/li structure. A lot of style customization should also be done. You can use this pen to help you out with the structure.
https://codepen.io/philhoyt/pen/ujHzd
Cheers,
Petia