This tutorial is about creating a menu on a simple static page, after hiding all widgets.
In my previous tutorial we
customized a static page, better said, downgraded it to a simple page, by hiding all widgets, including the menu.
But what if I still want a menu somewhere on the page, with a few links?
This was the question of one of my readers of the previous tutorial and a very good one.
On each static page you have a link to your home page at the bottom of the page, by default.
In case you would like some kind of navigation with more links, just place your links in a div (or span) container and place the div where you want the menu.
You could also
create a two column page if you want to show more content.
Step by step:
A. Create a menu
- First let's create a class for a minimal styling of this menu. Name it as you wish, let's say "navigation".
I give you three examples below with the menu placed in different locations on the page:
- horizontal top navigation:
.navigation {text-align:right;padding-bottom:10px;padding-right:20px;}
- horizontal bottom navigation:
.navigation {text-align: center; margin-top: 10px; padding:5px; background: #DEE9F4;}
This one has a background color, you can change or delete the color code in red.
- vertical navigation on the sides:
.navigation {float:right; width: 100px; margin-left: 20px; padding: 1px; border:1px solid #DEE9F4;}
.navigation a {display: block; padding-left:5px; background: #DEE9F4; margin:1px;}
This one has a background color, margins and a border.
Choose one of the above situations and place this code after the rest of style code before the closing style tag, as shown in the hiding all widgets tutorial.
- Create a simple link list with your links and place the class in front of the list like this:
<div class="navigation"> <a href="http://firts page url">Home</a> | <a href="http://second page url">Portfolio</a> | <a href="http://third page url">About Me</a> | <a href="http://fourth page url">Contact</a></div>
Replace the code in red with your own url-s and the green one with your tab's text.
- Insert this code where you want it in your page content, meaning:
- at the beginning of your post content for position a and c
- at the bottom of the page, after the content, for position b. Delete the vertical bars from between the links for the option.
- if you copy the above list code, your editor must be in Html mode when you paste it.
This is just a modest link list, don't expect anything fancy.
B. Create a two column page - magazine style:
Now that is really easy and you have a better control over your content.
Divide your page in two with two div containers, float one to the left and the other to the right, like this:
<div style="width: 90%; float: left;">CONTENT HERE</div><div style="width:10%; float: right;">VERTICAL NAVIGATION</div>
<!--Clear the divs if you want some more content bellow them-->
<div style="clear: both;"></div>
Change the width of the columns (in red) as you wish!
Here is an example of magazine style page:
Demo
That's all for today! Please ask if you have questions.
Read more >>