�ݺ�ߣ

How to create a simple one page site
By Moneer Kamal
moneerKamalprog@gmail.com

First of all we need html page basic tags to start with
<!DOCTYPE html>
<html>
<head>
<title>scroll</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Then we add our sections container Inside the body tag. This container
Will be a div with sections class and inside of it we add sections
tags with class section for each
<div class="sections">
<section class=“section" id="section1">
<h1>Section1</h1>
</section>
<h1>Section2</h1>
</section>
<h1>Section3</h1>
</section>
</div>

To navigate between sections we need to add a menu
before our sections each item of this menu will lead us
to a different section and we will add our
menu in a header tag
<header>
<nav>
<ul>
<li><a href="#section1">section1</a></li>
</ul>
</nav>
</header>

Now our body tag should look like this:
<body>
<header>
<nav>
<ul>
</ul>
</nav>
</header>
<div class="sections">
<section id="section1">
<h1>Section1</h1>
</section>
<h1>Section2</h1>
</section>
<h1>Section3</h1>
</section>
</div>
</body>

And our page will look something like this !

Well our page dose not look like a one page site yet we
still need the style to make it look good and the jquery
to create the functionality for the menu so lets start styling

Personally I prefer to reset the values of the margins
and padding for my elements before I start styling
you can do so by yourselves or you can just download
some reset css file from the internet
h1,div,section,nav,ul,li,header,body
{
display: block;
margin: 0;
padding: 0;
}

Now we style the header and the body
Body , html
{
overflow: hidden;
/*we don’t need the scroll we are going to use
the menu to scroll */
}
header
{
position: fixed;
top:0;
background: rgba(0,0,0,0.76);
height: 90px;
width:100%;
}

To complete our header we should style the menu
nav
{
width:100%;
}
nav ul li
{
float: left;
color: #fff;
margin-left: 30px;
margin-top: 20px;
}
a {
float: left;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}

Finally our sections style
#section1,#section2,#section3
{
height: 692px;
width: 100%;
text-align: center;
background: bisque;
padding-top: 100px;
box-sizing: border-box;
}
#section2{
background: burlywood;
}
#section3{
background: cadetblue;
}

Now our site will look like this

Now we can start adding our functionality but before we start coding
we should add the jquery library
<script type=text/javascript src=/slideshow/how-to-create-simple-onepage-site/47837135/"jquery.js"></script>
the next slide contains simple code for a plugin that will help
us scroll between the sections this code will be helpful
and reusable so keep it for the future.

$.fn.scrollTo = function (target, options, callback) {
if (typeof options == 'function' && arguments.length == 2) {
callback = options;
options = target;
}
var settings = $.extend({
scrollTarget: target,
offsetTop: 0,
duration: 1600,
easing: 'swing'
}, options);
return this.each(function () {
var scrollPane = $(this);
var scrollTarget =
(typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
var scrollY =
(typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top - parseInt(settings.offsetTop);
scrollPane.animate({scrollTop: scrollY}, parseInt(settings.duration), settings.easing, function () {
if (typeof callback == 'function') {
callback.call(this);
}
});
});
}

Now we use our lovely plugin. for me the default values that
I added will suit me perfectly
$(document).ready(function(){
$('ul li a').click(function (e)
{
e.preventDefault();
var to=$(this).attr('href');
$('body,html').scrollTo(to);
});
});
Note: you can add the code in script tag or in a different file and include it

�ݺ�ߣ

How to Create simple One Page site

More Related Content

How to Create simple One Page site