Create one page website using a simple jQuery plugin

By | July 17, 2016

How to create one page website using a simple jQuery plugin

Nowadays many companies are building their website as an one page website. One page website is nothing but a website created using a single page using some jQuery or javascript. This type of website is so popular and uses less resource. In this tutorial, I would like to explain how to create one page website using SMINT jQuery Plugin. This plugin eases development work. Having said that we need to create only html page and bit of code from SMINT in our page, that is all we need to do. The plugin will take care of all the other things.

This plugin also has sticky menu feature. Hope you know what is a sticky menu.

Let’s see how we can use this plugin in code to create one page website,

Create a menu and give it a class name. Inside this we need to create some anchor links for our menu items. In the anchor links href menu give a hash link. I mean set the href to some element id.

You can change the element id #section1 to be whatever your element id is, 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 as #section1 then you have to add a class name as .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 also You can replace .subMenu with the class name of your menu,

That’s all now you have created your one page website. Let me know your suggestions in the comments.

🔥0

Leave a Reply