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.

SMINT - simple plugin for lovers of one page websites

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

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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.

DEMO DOWNLOAD


You may also like...

24 Responses

  1. Tim Rowley says:

    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

    • designifyme says:

      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.

  2. Pamela Prosperi says:

    Great idea! Can I use it horizontally as well?

    • designifyme says:

      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?

      • Pamela Prosperi says:

        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!

        • designifyme says:

          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.

          • Pamela Prosperi says:

            Great! Let me know if you need a hand. Do you have it on github?

          • designifyme says:

            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!

  3. Ramana says:

    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

  4. Tim says:

    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.

    • designifyme says:

      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.

  5. lolekzehej says:

    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?

  6. lolekzehej says:

    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

  7. nataliecockrill says:

    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 🙂

  8. designifyme says:

    lolekzehej  
    Hey, I gave it a try but nothing works. The menu seems to stick on the last position you have been. Any luck?

  9. designifyme says:

    lolekzehej   not sure about that, I will give it a try.

  10. designifyme says:

    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.

  11. kolokomp says:

    lolekzehej you can use this js to fix it: http://wklej.org/id/1281904/ it will go to top of the page on refresh.

  12. Paulo Degaspari says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *