sendesignz

  • Increase font size
  • Default font size
  • Decrease font size
Home Web Development How to Design a Single Page Website Using CSS3 and jQuery
Web Development

How to Design a Single Page Website Using CSS3 and jQuery

Wednesday, 19 October 2011 16:35 Terrence
E-mail Print PDF

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
  });
});

Last Updated on Saturday, 12 November 2011 15:44  

Comments  

 
0 #6 huntsville webdesign 2013-02-08 06:07
Nice post. It is really very helpful to design a single page website using Css3 and jquery. Thanks for sharing such a nice information.
Quote
 
 
0 #5 Paul Baylis 2011-11-11 07:29
Nice, but why not use class="toggle" instead of id="toggle".That way you don't have a bunch of divs with the same id, which could conceivably cause issues.
Quote
 
 
0 #4 Paul Baylis 2011-11-11 07:27
Nice, but why not use ; that way you don't have a bunch of divs with the same id, which could conceivably cause issues.
Quote
 
 
+1 #3 Bob 2011-10-27 16:47
Nice tutorial. It's pretty stupid but i think I begin to understand logic of CSS with your tutorial. Thanks a lot
Quote
 
 
+1 #2 valikonen 2011-10-23 07:31
Nice tutorial. Thanks! I will follow your block! ;)
Quote
 
 
+1 #1 Mobile Web Design 2011-10-21 20:42
The example above is well suited for mobile web applications where the use of multimedia file is optimized thus focusing primarily of text. The presentation is nice, simple and clean.
Quote
 

Add comment