sendesignz

How to Design a Single Page Website Using CSS3 and jQuery

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

<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>

 

Styling with CSS

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; }
Note: -webkit-text-stroke only webkit support.   First you define the width and color.You can expand -webkit-text-stroke. see the below example

h1 {

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

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

}

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

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

<script src="js/animated-menu.js" type="text/javascript"></script>


Open animated-menu.js and place the below 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

});

});

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation