jQuery Sticky Navigation Bar For One Page Website - SMINT

jQuery Sticky Navigation Bar For One Page Website - SMINT
File Size: 5.65KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SMINT is a jQuery plugin that make it easy to create a sticky menu which 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. Ideal for those who love one page website.

Related plugins:

How to use it:

1. Include jQuery library and jQuery SMINT on the website

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" 	src="js/jquery.smint.js"></script>

2. Create the html

<div class="subMenu" >
<div class="inner"> 
<a href="#" id="sTop" class="subNavBtn">Home</a> 
<a href="#" id="s1" class="subNavBtn">Section 1</a> 
<a href="#" id="s2" class="subNavBtn">Section 2</a> 
<a href="#" id="s3" class="subNavBtn">Section 3</a> 
<a href="#" id="s4" class="subNavBtn">Section 4</a> 
<a href="#" id="s5" class="subNavBtn end">Section 5</a> 
</div>
</div>

<div class="section sTop">
<div class="inner">
<h1>Top</h1>
</div>
</div>

<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s2">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s3">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s4">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s5">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

3. The CSS

.menuBtn {
background: center center no-repeat transparent;
background: #000;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding: 30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding: 30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 462px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #aabd46;
}
.subMenu .inner {
padding: 0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 12%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background: #e5e5e5;
color: #3d3d3d;
}
.s1 {
min-height: 500px;
background: #2e2e2e;
}
.s2 {
min-height: 500px;
background: #3f3f3f;
}
.s3 {
min-height: 500px;
background: #504f4f;
}
.s4 {
min-height: 500px;
background: #6e87a1;
color: white;
}
.s5 {
min-height: 500px;
background: #293b4d;
color: white;
}

4. Call the plugin with options

<script type="text/javascript">
	
$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});

</script>

This awesome jQuery plugin is developed by outyear. For more Advanced Usages, please check the demo page or visit the official website.