WebMuch

Preview:

So as per the preview picture above we will be creating the sidebar of the website and make the main content container ready to work with, for the next part of this tutorial series.

Preparing:

• First we will go to the jQueryUI website and click on build custom download.
• Now we deselect all the options and then reselect only the ones we need.

What we need:

• We need the UI Core.
• We need only one widget: Accordion.
• We need only Effects Core.
• Make sure to make the download 1.5.3 (Legacy release, for jQuery 1.2.6).

Now, open the zip file downloaded and go into the js folder and copy the file “jquery-ui-1.5.3.custom.min.js” into a new folder in your website directory, call the folder js. We will not be needing the jQuery JavaScript because we will be using google’s CDN to jQuery as it saves us bandwidth and it is cached on a lot of computers already, therefore, makes the site faster.

Now, for our curved corners go to: blue-anvil and download the Anti-Aliased rounded corners with jQuery zip file. Open the zip file and copy “jquery.curvycorners.packed.js” into the js folder of our website directory.

We then include all the JavaScript files in our web page right before ending the body tag:

<!-- From here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><!-- This is google's free link to the jQuery library -->
<script src="./js/jquery-ui-1.5.3.custom.min.js" type="text/javascript"></script>
<script src="./js/jquery.curvycorners.packed.js" type="text/javascript"></script>
<script type="text/javascript">
    //jQuery code here...
</script>
<!-- Till here -->
</body>

So from here we finally start coding. Open our index.html in a text editor and start right where we left off i.e. after closing the header division and we will finish our code right before the end of the main container tag which we made in the last tutorial.

</div><!-- end header -->
<!-- Start here -->
<div id="content-container">

	<div id="sidebar">

		<h3>Products:</h3>
		<div id="accordion-container">
			<ul id="accordion">
				<li>
					<a href="#recent" class="heading">Recent Entries</a>
					<ul id="recent">
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
					</ul>
				</li>
				<li>
					<a href="#popular" class="heading">Popular Entries</a>
					<ul id="popular">
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
						<li><a href="#">Recent Entry Title</a></li>
					</ul>
				</li>
				<li>
					<a href="#categories" class="heading">Categories</a>
					<ul id="categories">
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
						<li><a href="#">Category Name</a></li>
					</ul>
				</li>
				<li>
					<a href="#archive" class="heading">Archive</a>
					<ul id="archive">
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
						<li><a href="#">January 2009</a></li>
					</ul>
				</li>
			</ul><!-- end accordion ul -->
		</div><!-- end accordion-container -->
		<h3>Latest Updates:</h3>
		<div id="curved-box" class="corner-this">
			<marquee onMouseOver=this.scrollAmount=0 onMouseOut=this.scrollAmount=2	scrollamount=2 direction="up">
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
				<p>This is a curved box where you can post latest news. Put up a slider or something.</p>
			</marquee>
		</div><!-- end curved box -->

	</div><!-- end sidebar -->
	<div id="content">
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
		This is a content box where you can post latest news. Put up a slider or something.
	</div><!-- end content -->
</div><!-- end content-container -->
<!-- End here -->
</div><!-- end container -->

In the above code: we opened a new container division in which we floated two divisions: a sidebar division to the left and a content division to the right. I gave the content division just a basic padding and then pasted in some gibberish text which we will remove the next time we start working on it. Then, In the sidebar container there are two main elements the accordion container inside which is an unordered list in which there is another unordered list inside each list item and then there a curved-box division inside which is a marquee tag which I don’t recommend using but I still have placed it there so the page looks a little more lively. I’d recommend a great slider you can use instead made with jQuery called Easy Slider. Now back to what we are making, below is my CSS code which is quite self explanatory as it is well commented.

#content-container{
	width:100%;
	height:auto;
	overflow:hidden; /* for clearing the floats inside it */
	float:left;
}
#sidebar{
	width:300px;
	margin-right:5px;
	float:left;
}
#sidebar h3{ /* these are the two headings. Products and Latest Updates */
	font-family:Arial;
	font-size:15px;
	color:#000;
	padding:10px;
}
#content{
	float:left;
	width:634px; /* because of 1px border to this element, else it would be 635px  */
	height:800px; /* temporary */
	padding:10px;
	background:#c4c4c4;
	border-bottom: 1px solid #444; /* temporary */
	border-left: 1px solid #444;
}
/* Accordion */
#accordion-container {
	width: 290px;
	margin:0 0 10px 7px; /* top right bottom left */
}
ul#accordion, ul#accordion ul { background:#f8f7f7; }
ul#accordion { border-bottom: 1px solid #444; }
ul#accordion li {
	border: 1px solid #444;
	border-bottom: none; /* to avoid double borders at bottom */
}
ul#accordion ul li {
	border: none; /* to remove the excess borders from previous properties */
	border-bottom: 1px solid #C2C8D1; /* and then put what we like. */
	padding: 5px 10px;  /* [top | bottom] [left | right] */
}
ul#accordion ul li:last-child { border-bottom: none; } /* to remove the borders from the last list element */
ul#accordion a.heading { /* the big menu names in the accordion */
	background: #d9d4ce;
	color: #46382f;
	display: block;
	font-size: 18px;
	line-height: 18px;
	padding: 10px 5px;
	text-decoration: none;
}
ul#accordion a.heading:hover { /* mouseover the big menu names in the accordion */
	background: #46382f;
	color: #fff;
}
ul#accordion li ul a { /* the inside-menu elements */
	color: #000;
	text-decoration:none;
}
ul#accordion li ul a:hover { border-bottom: 1px dotted #46382f; } /* to give the inside-menu elements mouseover */
/* End Accordion */
#curved-box{
	background:#d9d4ce;
	width:288px;
	height:205px;
	padding:10px;
	border:1px solid #444;
	margin:10px 0 10px 7px;
}
#curved-box p{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom: 1px dotted #444;
}

Even though you have styled all the elements the accordion is not together and the curved box doesn’t have the curved corners yet. Not to worry we only have to write a few more lines of code to accomplish that. Right before the body tag we inserted our scripts, but if you look carefully we inserted three scripts and a fourth empty script tag with only a comment in it saying jQuery code here. Remove that comment and paste the code below in it’s place.

$(function(){
	$('#accordion').accordion();
	$('.corner-this').corner();
});

Refresh your page and play around with the accordion and admire the anti-aliased curved corners.

Also, I have started my community link feed as you can see in the sidebar (Thanks to Collis Ta’eed’s Great Tutorial) So please contribute to it. It takes less than a minute to submit a link there. So if you happen to have or know a link to a great tutorial or tip or a great article about web design & development please submit it here

Thank You

Links:

• jQuery UI
• Anti-Aliased Curved Corners – Blue Anvil
• Easy Slider

Download the Source Code