Custom HTML, CSS and jQuery website template!

In this article we’re going to design and implement a unique page layout. Our main logo and navigation bar will be locked and fixed onto the left side of the screen, and the larger right side of the screen will be scrollable and hold our main content.

Before we start, check out the demo here.

Ok, now that you’ve seen it, let’s get started!

Our first step will be to set up our sticky sidebar.

Sidebar HTML

Here’s the HTML we’ll use, place this right under your <body> tag:

<div class="sidewrap">

	<div class="logo">
		<h1>Your Title</h1>
	</div><!-- .logo -->

	<div class="navigation">
		<button class="navbutton" id="button1">Section 1</button>
		<button class="navbutton" id="button2">Section 2</button>
		<button class="navbutton" id="button3">Section 3</button>
		<button class="navbutton" id="button4">Section 4</button>
	</div><!-- .navigation -->

</div><!-- .sidewrap -->

We wrap the entire sidebar with the <div class=”sidewrap”> and from there we need to set a few things in CSS to make it stay in place:

Sidebar CSS

body {
	height: 100%;
	}

.sidewrap {
	width: 250px;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	background: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.7);
	z-index: 9999;
	}	

The important factors in our CSS are;

The height of the body being 100%, and our .sidebar being auto. This ensures that the sidebar will stretch all the way to the bottom of the page, regardless of the size of the browser.

Our position: fixed setting makes sure it stays in place, and the ‘top’, ‘left’ and ‘bottom’ settings will keep our sidebar against the edges of the screen.

Here’s the additional CSS for the navigation and logo div’s, our widths are set the same as our sidewrap class

.logo {
	width: 250px;
	margin: 10px auto 0 auto;
	text-align: center;
	}

.navigation {
	width: 250px;
	margin: 10px auto 0 auto;
	text-align: center;
	}

.navbutton {
	margin-top: 10px;
	border: 0;
	left: 0;
	font-size: 18px;
	width: 250px;
	height: 50px;
	background-color: #000;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	}

.navbutton:hover {
	background-color: #e2e2e2;
	}

Main Content

The rest (or right side) of our content will be set up with this HTML:

<div id="wrapper">

<div id="section1" class="contentpart">
	<p class="title">
		Section 1 Title
	</p><!-- p.title -->

	<p class="content">
		YOUR CONTENT GOES HERE :) 
	</p><!-- p.content -->
</div><!-- #section1 -->

</div><!-- #wrapper -->

This will be the content on the right hand side of the page that is scrollable and next to our fixed sidebar. We wrap the entire content body with our <div id=”wrapper”> and then can break up our “sections” with the <div id=”section1″ class=”contentpart”>

The section1 will change to section2, section3, etc… with each one you add. Each ID must be unique for in order for our scrolling buttons on the sidebar. They will be setup to automatically scroll down to their related section ID.

jQuery

Now we need to activate our sidebar buttons with scroll functions. Here’s the jQuery function for it:

<script type="text/javascript">
$(document).ready(function(){
	$("#button1").click(function() {
		$('html, body').animate({
			scrollTop: $("#section1").offset().top - 17
			}, 1000);
	});
});
</script>

When clicked, our button1 in the sidebar will make the page automatically scroll down to our section1 div. In order activate other buttons we need to create an additional function like this:

$("#button2").click(function() {
	$('html, body').animate({
		scrollTop: $("#section2").offset().top - 17
		}, 1000);
});

The ‘17’ value represents the top offset of the div. This will essentially be the padding from the top of the screen. The ‘1000’ value is how long it will take for the window to scroll to the desired element. Make the value higher for a slower scroll.

Conclusion

That will complete the basic layout and you can customize from there! In the source files I included comments in both files and implemented 4 navigation buttons! Enjoy!

DEMO

DOWNLOAD

SHARE THIS POST
  • http://twitter.com/danibluebishop Dani Ramírez

    Just a little comment; IMHO the title for sections should use
    because of usability issues, instead of . Isn’t it?

  • http://noelcohen.webstarts.com/ RisaRichardson

    This website can be a walk-through for all of the info you wanted about
    this and didn’t know who to ask. Glimpse right here, and you’ll
    positively discover it.

  • http://www.a3logics.com/open-source-solutions/java Java Development Services

    This post is well written and informative. I don’t comment often, but it doesn’t cost me anything to say it when its true. Cheers.

  • http://www.iwebxpert.com/ Daisy Bono

    Complete package. The whole web design concept is all here. No doubt
    many web designers will learn a whole lot of things in this post.

  • http://twitter.com/mycreativeloop godonholiday

    could this not be re factored? Having lots of functions there for each button.. could we not use pairs of classnames or the data attribute?

  • Guest

    Just saw this article and thought I’d let you know that the link for your DEMO produces a “500 Internal Server Error”. Also when trying to post as a “guest” the form is still requiring a Name & Email