One Page Stick
A one page stick website is a newer style for web designers. It consists of all of the websites content on one single page, which is easily navigatable, and contains a handy nav bar that follows you as you go down. This nav bar stays at the top of the page, and when clicked, will smoothly scroll down on the webpage to the area that you are looking for, making navigation easy for all users. Also, the page is designed to have the information be displayed in a very simple manner, and generally looks very clean. One common, easy to use tool to make single page web layouts is SMINT . SMINT stands for "Sticky Menu Inlcuding Navigation Thingy". To learn more about how to use SMINT, check out the content below.
Some good examples of one page stick websites are as follows:
Intuio: Usable Experiences
Sky Reach Telecommunications
Sample SMINT Website - By Ryan and Peter
The HTML
To start creating the HTML of a one page stick with SMINT, you have to link the files that come with it, in order to get SMINT's pre written code for the webpage. Do this with the following code.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js" type="text/javascript" ></script>
<script type="text/javascript"> Next, you will need to add in the section of the code that allows for the javascript to respond and scroll on the page when the button event is called (button is pressed). $(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
}); After that, create the main div, called wrap. All of your one page site content will be places inside of this in order to keep it all working correctly. The first thing inside of this div will be the title section code. You do this with the following code. <div class="wrap">
<div class="section sTop">
<div class="inner">
<h1 class="title">SMINT Demo Page</h1>
<h2 class="subtitle">Feel free to use this as your starting template</h2>
</div>
</div>
</div> The next part is the navigation bar. To do this, use the following code. The classes and names of each part of it was written by MINT to correctly make the navbar work on the webpage. <div class="subMenu" >
<div class="inner">
<a href="#sTop" class="subNavBtn">Home</a>
<a href="#s1" class="subNavBtn">Section 1</a>
<a href="#s2" class="subNavBtn">Section 2</a>
<a href="#s3" class="subNavBtn">Section 3</a>
<a href="https://twitter.com/rabmyself" class="subNavBtn extLink end">External Link</a>
</div>
</div> The final thing you will need to finish up the HTML is the nessecary code to create the actual sections of the webpage. Since our navigation bar has 3 internal webpage buttons, we will create 3 sections, however this is customizable just by changing the 's3' to an 's4' or whatever number is after the current number of sections you have. <div class="section s1">
<div class="inner ">
<h1>Section 1</h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Section 2</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Section 3</h1>
</div>
</div>
<script src="js/jquery.smint.js" type="text/javascript" ></script>
<script type="text/javascript"> Next, you will need to add in the section of the code that allows for the javascript to respond and scroll on the page when the button event is called (button is pressed). $(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
}); After that, create the main div, called wrap. All of your one page site content will be places inside of this in order to keep it all working correctly. The first thing inside of this div will be the title section code. You do this with the following code. <div class="wrap">
<div class="section sTop">
<div class="inner">
<h1 class="title">SMINT Demo Page</h1>
<h2 class="subtitle">Feel free to use this as your starting template</h2>
</div>
</div>
</div> The next part is the navigation bar. To do this, use the following code. The classes and names of each part of it was written by MINT to correctly make the navbar work on the webpage. <div class="subMenu" >
<div class="inner">
<a href="#sTop" class="subNavBtn">Home</a>
<a href="#s1" class="subNavBtn">Section 1</a>
<a href="#s2" class="subNavBtn">Section 2</a>
<a href="#s3" class="subNavBtn">Section 3</a>
<a href="https://twitter.com/rabmyself" class="subNavBtn extLink end">External Link</a>
</div>
</div> The final thing you will need to finish up the HTML is the nessecary code to create the actual sections of the webpage. Since our navigation bar has 3 internal webpage buttons, we will create 3 sections, however this is customizable just by changing the 's3' to an 's4' or whatever number is after the current number of sections you have. <div class="section s1">
<div class="inner ">
<h1>Section 1</h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Section 2</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Section 3</h1>
</div>
</div>
The CSS
The CSS is very easy, because SMINT provides us with it. If you want to change any aspects of the webpage, or any content you add, you will need to make your own rules in CSS. However, the HTML that we just wrote for the webpage uses the rules that SMINT has just to make the core of the webpage. Don't forget to link it in HTML as well!
SMINT provides a demo.css file along with their source code download. Within this css file, all of the rules you will need are defined. Either link this file, or copy and paste the classes and rules you are using from inside of the demo.css file into your own css file. From there on you can make any changes you need.
-
SMINT
Take a look