This blog entry will explain how you could go about creating a simple horizontal navigation menu using Movable Type, some HTML and CSS code. In order to create such a menu the user doesn't really need to have any knowledge of HTML and CSS, but some knowledge is required if, for example, the user wants to change the color scheme of the menu.
Here is how the final menu should look like:
Here is a simple outline of all the things that we are going to do in order to add a horizontal menu bar:
1. Copy some HTML code into the Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page. All these pages refer to all the different parts of the blog that are going to be affected by the HTML; therefore, inserting the HTML code for the menu in all pages except the Monthly Entry Listing will make all pages have a menu except Monthly Entry Listing
2. Copy some CSS code in the Stylesheet
3. Preview the blog
Follow these steps to add the menu:
1. Log in into Movable Type
2. Go to the Design drop-down menu and select Templates. This is where you can make any design changes to the blog by accessing specific regions of the blog, e.g. the blog footer, the header, the main index page and so on.
3. Copy this HTML code:
<div id="nav">
<span class="navright"><a href="http://b27.cc.trincoll.edu/weblogs/sta/about.html">About STA</a></span>
<a href="http://blogs.trincoll.edu/sta/">Home</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/documentation.html">Documentation</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/categories.html">Categories</a> |
</div>
Note: This HTML code creates a menu with 4 links: About STA, Home, Documentation and Categories. Modify the names to the ones you need. Furthermore, for each link you have to provide the correct url link to the page it is linking to. For example, About STA is linked to the url http://b27.cc.trincoll.edu/weblogs/sta/about.html, therefore you might want to change that link to the one corresponding to the name of your page.
4. Paste the code from step 3 after the <div id="alpha-inner"> tag in each of the following pages: Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page, and after pasting the code click the Save button. The example bellow illustrates how you would edit Main Index, but the process is similar with all the other pages:
5. Copy the following CSS code:
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#6699CC;
color:#fff;
border-bottom: 3px solid #AEC9E4;
margin-top: 5px;
margin-bottom: 30px;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
.navright {
float: right;
padding-right:10px;
}
6. Go to the Design drop-down menu and click on Templates
7. Select Stylesheet from the Index Templates group
8. Paste the CSS code from step 5 after all the existing code. Follow this picture for an example:
9. Click Save & Publish.
10. That's it! Preview your page and see the result. Your page should have a horizontal navigation menu right under the header image of the blog.
If you have any questions or you encounter any problems while working through the example, call the STA office for support at extension 2589 or e-mail us at sta-help@trincoll.edu.
Here is how the final menu should look like:
Here is a simple outline of all the things that we are going to do in order to add a horizontal menu bar:1. Copy some HTML code into the Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page. All these pages refer to all the different parts of the blog that are going to be affected by the HTML; therefore, inserting the HTML code for the menu in all pages except the Monthly Entry Listing will make all pages have a menu except Monthly Entry Listing
2. Copy some CSS code in the Stylesheet
3. Preview the blog
Follow these steps to add the menu:
1. Log in into Movable Type
2. Go to the Design drop-down menu and select Templates. This is where you can make any design changes to the blog by accessing specific regions of the blog, e.g. the blog footer, the header, the main index page and so on.
3. Copy this HTML code:
<div id="nav">
<span class="navright"><a href="http://b27.cc.trincoll.edu/weblogs/sta/about.html">About STA</a></span>
<a href="http://blogs.trincoll.edu/sta/">Home</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/documentation.html">Documentation</a> |
<a href="http://b27.cc.trincoll.edu/weblogs/sta/categories.html">Categories</a> |
</div>
Note: This HTML code creates a menu with 4 links: About STA, Home, Documentation and Categories. Modify the names to the ones you need. Furthermore, for each link you have to provide the correct url link to the page it is linking to. For example, About STA is linked to the url http://b27.cc.trincoll.edu/weblogs/sta/about.html, therefore you might want to change that link to the one corresponding to the name of your page.
4. Paste the code from step 3 after the <div id="alpha-inner"> tag in each of the following pages: Main Index, Archive Index, Category Entry Listing, Entry, Monthly Entry Listing and Page, and after pasting the code click the Save button. The example bellow illustrates how you would edit Main Index, but the process is similar with all the other pages:
5. Copy the following CSS code:
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#6699CC;
color:#fff;
border-bottom: 3px solid #AEC9E4;
margin-top: 5px;
margin-bottom: 30px;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
.navright {
float: right;
padding-right:10px;
}
6. Go to the Design drop-down menu and click on Templates
7. Select Stylesheet from the Index Templates group
8. Paste the CSS code from step 5 after all the existing code. Follow this picture for an example:
9. Click Save & Publish.10. That's it! Preview your page and see the result. Your page should have a horizontal navigation menu right under the header image of the blog.
If you have any questions or you encounter any problems while working through the example, call the STA office for support at extension 2589 or e-mail us at sta-help@trincoll.edu.
