How to Design a Single Page Website Using CSS3 and jQuery

, , Leave a comment

Single page websites are the best and faster way to give the content to your visitors. But it is not possible and suitable for every person and business. A good candidate for a one-page website is not super-heavy on content. Most popular one page website is personal portfolio websites to market you and your business. Today I will show you how to design a single page website using CSS3 and jQuery.

See the Demo

HTML

{code}<h1>Sendesignz.com</h1> <div id="toggle"> <p>Your Contant</p> </div> <h1>Services</h1> <div id="toggle"> <p>Your Contan</p> </div> <h1>Portfolio</h1> <div id="toggle"> <p>Your Contan</p> </div> <h1>Contact</h1> <div id="toggle"> <p>Your Contan</p> </div>{/code}

 

Styling with CSS

{code}body { background-color:#303639; }  #toggle { display: none; width: 100%; padding-top:10px; padding-bottom:10px; background: #e0d304; position: relative; margin-top:-53px; }  p{ font-family: 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif; font-size:30px; color:#303639; margin:10px; }   h1 { font-family: ' Myriad-Pro', 'Myriad', helvetica, arial, sans-serif; text-shadow: 2px 3px 3px #000; letter-spacing: 1px; -webkit-text-stroke: 3px #bbb; font-size:80px; color:#CCC; border-bottom:1px #999 solid; cursor:pointer; }{/code} Note: -webkit-text-stroke only webkit support.   First you define the width and color.You can expand -webkit-text-stroke. see the below example

{code}h1 {

-webkit-text-stroke-width: 3px;

-webkit-text-stroke-color: #bbb;

}{/code}

Javascript

Start by adding the necessary libraries and external files in the head.

I have placed jQuery Library into the “js” folder

I have created the animated-menu.js also into the “js” folder.

Download jquery-1.6.4.min.js
{code}<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="js/animated-menu.js" type="text/javascript"></script>{/code}
Open animated-menu.js and place the below code. 
{code}$(document).ready(function(){

//Hide/show the toggle containers on load

$("#toggle").show();

$('#toggle:first').addClass('active').next().show();

 

//Switch the "Open" and "Close" state per click then slide up/down

$("h1").click(function(){

if( $(this).next().is(':hidden') ) {

$('h1').removeClass('active').next().slideUp();

$(this).toggleClass('active').next().slideDown();

}

else

{

$('h1').removeClass('active').next().slideUp();

}

return false; //Prevent the browser jump to the link anchor

});

});{/code}

Share this: