This week we’re going to finish up our series on how to develop a clean website by laying out a secondary page.
We’re going to include a secondary navigation bar along the top of our design, as well as include all of our text for the section on one page. This will eliminate the unnecessary loading of other pages when all that’s changing is the text. It will allow the visitor to browse your site quicker and be less work for you to develop.
When all is said and done, this is what you’ll have developed:
Since we’ve already got the basic structure of our site laid out with our homepage, let’s begin by renaming our index.php file “about.php”. Once we’ve got our about page created we’re going to need to change a few things so that it doesn’t function like our homepage. First and foremost we want to change the body id from “homePage” to “aboutPage”.
<body id="aboutPage">After we’ve identified this as our “About” page, we’re going to want to drop in a sub-navigation bar that will allow the viewer to quickly jump between our Philosophy, Vision, and History pages.
To do that I created an unordered list between my <nav> and <section> tags, and created anchors for the links. The beauty of this method is that text loads quickly and including all the text on one page keeps the visitor from having to load three different pages when all that’s changing is a few paragraphs of text.
<nav>
<?php include ('navigation.html') ?>
</nav>
<ul class="about">
<li><a href="#Philosophy">Philosophy</a></li>
<li><a href="#Vision">Vision</a></li>
<li><a href="#History">History</a></li>
</ul>
<section>Next we’re going to start dropping our content in to the <section> tag. Before we do that we’re going to want to replace the image that immediately follows the opening of the <section> tag with an <article> tag and give it a class of “about”.
We’ve got three sub-pages under our “About” link, so rather than creating three separate pages where nothing changes other than the text, we’re going to drop all the text in the about page and use some anchors and CSS to quickly and gracefully jump between the content.
This will also make adding a fourth sub-link under “About” a breeze if the client asks you to do so in the future. You add the link to the navigation.html file, then once in the about.php file, followed by adding the text inside the <article> tag and you’re done.
If you have your own content, go ahead and use that. If you’re developing this site as a concept to show a client but don’t have any content feel free to use this Lorem ipsum text, or visit www.loremipsum.com to generate your own.
<article class="about">
<a name="Philosophy"></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus est ante, hendrerit vitae rhoncus a, tempus in mi. Etiam tincidunt aliquet faucibus. Nam ut consectetur dui. Vestibulum a quam vel ante elementum tempus tempor eu nunc. Curabitur et justo id dui eleifend lobortis. Pellentesque ligula sem, tristique et iaculis a, tincidunt in metus. Vestibulum interdum porta diam, eu semper leo ullamcorper at. Curabitur vel urna lorem. Vestibulum imperdiet orci at sem iaculis pulvinar. Etiam nec metus id sapien suscipit venenatis. Morbi nec neque sapien. Ut elit augue, euismod a aliquet at, iaculis at nisi. Nam dignissim, mauris non tincidunt accumsan, nisl ligula fermentum nulla, et auctor arcu elit quis massa. Vestibulum dapibus molestie convallis. Vivamus iaculis ipsum ut arcu auctor lobortis.</p>
<p>Vestibulum mattis vulputate orci, vitae consequat ipsum facilisis ac. Pellentesque gravida blandit venenatis. Sed eu nisl at arcu viverra aliquet vitae id purus. Aliquam et sem quis lectus adipiscing fringilla. Nam ut mauris nec arcu facilisis tempus a et nunc. Suspendisse fermentum risus nulla, vel sollicitudin mauris. Donec a sem vitae elit placerat venenatis at a risus. Sed egestas nunc vitae justo placerat eget pellentesque tortor volutpat. Aliquam cursus hendrerit fermentum. Duis lacus est, porta at egestas a, tristique in orci.</p>
<p>Vestibulum tellus turpis, consectetur nec eleifend sit amet, pretium ac ipsum. Maecenas quis lacus ipsum, vestibulum euismod arcu. Proin vitae nulla quis quam ultricies interdum. Vivamus vel erat ipsum. Praesent interdum nunc turpis, non pellentesque urna. Nam adipiscing dolor a augue viverra suscipit. Vivamus varius fringilla velit, ac. Etiam nec metus id sapien suscipit venenatis. Morbi nec neque sapien. Ut elit augue, euismod a aliquet at, iaculis at nisi. Nam dignissim, mauris non tincidunt accumsan, nisl ligula fermentum nulla, et auctor arcu elit quis massa. Vestibulum dapibus molestie convallis. Vivamus iaculis ipsum ut arcu auctor lobortis.</p>
<a name="Vision"></a>
<p>Aliquam elementum feugiat odio sit amet posuere. Integer lacus sem, dapibus non egestas et, pretium vitae lorem. Nulla facilisi. Sed lectus turpis, consectetur a interdum in, tincidunt non mauris. Praesent rhoncus quam nec justo dictum sed pellentesque lectus ornare. Nullam vitae urna justo. Cras faucibus diam non felis molestie pellentesque. Sed lorem mi, ullamcorper a commodo sed, bibendum a erat. Suspendisse placerat ultrices nunc et auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec felis eu quam cursus semper id nec urna.</p>
<p>Duis in enim id sapien dictum gravida. Quisque sed dolor a mi auctor fringilla in at nunc. Fusce vel massa tortor, ac adipiscing odio. Curabitur commodo varius faucibus. Quisque tempus consectetur tortor, iaculis luctus leo placerat dignissim. Integer nisl lectus, porttitor et egestas quis, vulputate eu dolor. Pellentesque id tellus purus, ac tristique purus. Praesent in metus mauris, eu pharetra erat. Aenean ac orci sed ipsum pretium lobortis. Vestibulum dui sapien, cursus iaculis tincidunt vitae, lobortis adipiscing ligula. Suspendisse potenti. Morbi tristique libero ligula, condimentum tempor nulla. Ut pretium mattis hendrerit. Sed pulvinar ante ut diam lobortis porta. Ut in fringilla libero. Donec non odio a elit vulputate iaculis.</p>
<p>Vestibulum tellus turpis, consectetur nec eleifend sit amet, pretium ac ipsum. Maecenas quis lacus ipsum, vestibulum euismod arcu. Proin vitae nulla quis quam ultricies interdum. Vivamus vel erat ipsum. Praesent interdum nunc turpis, non pellentesque urna. Nam adipiscing dolor a augue viverra suscipit. Vivamus varius fringilla velit, ac. Etiam nec metus id sapien suscipit venenatis. Morbi nec neque sapien. Ut elit augue, euismod a aliquet at, iaculis at nisi. Nam dignissim, mauris non tincidunt accumsan, nisl ligula fermentum nulla, et auctor arcu elit quis massa. Vestibulum dapibus molestie convallis. Vivamus iaculis ipsum ut arcu auctor lobortis.</p>
<a name="History"></a>
<p>Phasellus turpis quam, pulvinar et posuere a, laoreet sed mauris. Suspendisse potenti. Cras pretium, mi congue molestie commodo, velit metus tempor magna, eu sodales justo nibh eget risus. Nulla dignissim rhoncus justo quis egestas. Nunc sed nisi sed ipsum feugiat ullamcorper. Pellentesque sollicitudin congue ligula, ut dignissim ligula placerat vitae. Vivamus varius velit a felis lobortis mattis. Aenean ac orci sed ipsum pretium lobortis. Vestibulum dui sapien, cursus iaculis tincidunt vitae, lobortis adipiscing ligula. Suspendisse potenti. Morbi tristique libero ligula, condimentum tempor nulla. Ut pretium mattis hendrerit. Sed pulvinar ante ut diam lobortis porta. Ut in fringilla libero. Donec non odio a elit vulputate iaculis.</p>
<p>Vestibulum mattis vulputate orci, vitae consequat ipsum facilisis ac. Pellentesque gravida blandit venenatis. Sed eu nisl at arcu viverra aliquet vitae id purus. Aliquam et sem quis lectus adipiscing fringilla. Nam ut mauris nec arcu facilisis tempus a et nunc. Suspendisse fermentum risus nulla, vel sollicitudin mauris. Donec a sem vitae elit placerat venenatis at a risus. Sed egestas nunc vitae justo placerat eget pellentesque tortor volutpat. Aliquam cursus hendrerit fermentum. Duis lacus est, porta at egestas a, tristique in orci.</p>
<p>Suspendisse tortor ipsum, ornare porttitor scelerisque non, pretium in mi. Vestibulum sodales pretium ipsum, sit amet faucibus sem aliquam fermentum. Nullam dictum risus tincidunt sem.Aliquam elementum feugiat odio sit amet posuere. Integer lacus sem, dapibus non egestas et, pretium vitae lorem. Nulla facilisi. Sed lectus turpis, consectetur a interdum in, tincidunt non mauris. Praesent rhoncus quam nec justo dictum sed pellentesque lectus ornare. Nullam vitae urna justo. Cras faucibus diam non felis molestie pellentesque. Sed lorem mi, ullamcorper a commodo sed, bibendum a erat. Suspendisse placerat ultrices nunc et auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>You’ll see that I have three paragraphs for each sub-page and I’ve separated them by anchors, which we can now style by going back to our CSS file. But before we style our anchors we’re going to want to begin by defining the position, height, and a few other attributes of our About article.
I styled mine as follows:
article.about {
position:relative;
color:#404648;
font-size:14px;
overflow:hidden;
top:25px;
height:300px;
margin-bottom:11px;
}You’ll notice that I defined a height and set the overflow to hidden, this is so only the content for the page our viewer clicked on will be visible. Rather than having the first few lines of the vision page appear while on the Philosophy page, it will be nicely hidden out of the way.
Now we’re going to add some style to our sub-navigation, but before we do that we’re going to move it in to place. I kept it simple with some absolute positioning and aligned it nicely above the text and inline with the “Home” link in our main navigation.
ul.about {
position:absolute;
top:95px;
left:73px;
width:300px;
display:inline;
list-style:none;
font-size:16px;
}At this point, if you preview your work, your sub-navigation should look something like this.
Now that we’ve got our sub-navigation menu where we want it we need to add some style to it, so that it flows with the rest of the design. We want it to run inline with the “Home” link in our main navigation and space each link apart from one another a little bit.
We also want to have a slightly different color for these links than the main navigation. You’ll notice I chose the light blue color that we see as the border inside our three boxes as my main state, and then when hovered over the links will change to the burnt orange color.
ul.about li {
margin-right:15px;
display:inline;
}
ul.about li a {
text-decoration:none;
color:#6BA5BD;
}
ul.about li a:hover {
color:#C24E07;
}Last but not least we’re going to need to modify our navigation.html file to navigate the sub-links under “About” properly.
Since we used a php include to call our navigation throughout the site, we only have to change these links once and it will carry through the entire site. Be sure to not only include about.php in the link, but fix the appropriate anchor to the end as well. The code for my “About” list within my navigations <ul> tag looks as follows:
<li>
<p><a href="about.php#Philosophy" id="menu-about">About</a></p>
<div>
<a href="about.php#Philosophy">Philosophy</a><br />
<a href="about.php#Vision">Vision</a><br />
<a href="about.php#History">History</a>
</div>
</li>Once you’ve got your links styled and in place, you should be done with you sub-page and just some minor tweaking of a few pages away from completing your site. If this is too minimal for you, try wrapping your main text in a box with rounded corners, a slight gradient, and a drop shadow, just like we did with the three small boxes at the bottom.
I prefer the clean, more open look of this design that is achieved by not boxing the main content in. If you’d like to download my full source code for this site, feel free to do so here.
