One Column Slider Layout : 31st July 2007
So you know what the aim of this tutorial is, take a look at the end result. This is a fairly technical website, but uses the Moo.fx javascript library for the effects. Make sure that it is downloaded and installed before getting started.
Setting up Moo.fx
First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.
The HTML
You can download a copy of the HTML for the page to take a look and see how the effect is achieved.
The CSS
body {
color: #222;
font: 62.5% verdana, arial, helvetica, sans-serif;
margin: 5px 0 0;
padding: 0;
text-align: center;
}
h3 {
background: #000;
margin: 5px 0 0;
padding: 1px 0;
height: 17px;
width: 600px;
cursor: pointer;
font-size: 0.99em;
}
h3 a:link, h3 a:visited {
color: #fff;
padding: 2px 8px 1px;
-moz-outline-style: none;
display: block;
height: 14px;
width: 330px;
text-decoration: none;
}
#container {
width: 666px;
text-align: left;
margin: 0 auto;
}
#header {
text-align: center;
}
#content {
padding: 0 10px 25px 33px;
}
p {
margin: 0 0 1px;
padding: 5px;
line-height: 15px;
}
div.wrapper {
background-color: #EBEBEB;
}
#content div {
margin: 0;
padding: 0;
height: 1%;
}
.stretcher {
background: none !important;
}
Put it all together
Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.
Comments and Discussion
Great tutorial. I really like the accordion effect and didn't seem to have any problems setting the page up.
Glad you liked it Mark - Thanks for the comment. Drop us a link and let us know how you used the script!
I can't seem to get the scripts to work prorperly. I followed the instructions to a "T", and even tried the earlier version of Moo.fx, but I can't get my accordion to work. Any help would be greatly appreciated.
Having the same issue. According not working.
Hello, This is a great design and script. I’ve followed your instructions, but though myage comes up with the CSS place, the accordion is not working. In order for me to get your demo working, I’d appreciate more detailed instructions re: folder structure on server, where each JS file is placed, what script goes on the HTML page itself, etc. In any case, please step us through the setup a little more. Thank you!
