Menu Bar with CSS Definitions

(Related Topic: Adding a Menu Bar)
Menu bars are the basic navigation tools of a website. Menu bars allow the visitors or users of a website to conveniently navigate from one page to another. Without the menu bar or any other navigation links, all the contents of a website have to be placed on the front page. This would be tantamount to printing a whole book as a long scroll rather than the more practical leaf-page format. The menu bar is comparable to the index or table of contents of a book. It allows the readers to find the particular page or contents that they want. Thus, the need for scanning the whole book is eliminated.

Even blogsites may need menu bars for easy navigation. For instance, this blogsite features a simple menu bar located at the top portion of the header area. This menu bar leads to the different resources and information found on this blogsite. Since each blog post is located on a unique page, you can link the important pages to the items of your menu bar. For instance, I have included the following items in my menu bar:

HOME||CHAT||GAMES||SLIDES||BLOGROLL||ABOUT||CONTENTS

The menu bar of this blogsite was created using simple text links. There is another way of creating a Blogger/Blogspot menu bar using CSS definitions. CSS adds text effects to the menu bar. In my previous post on this topic I have discussed the simple method that I have used for this blogsite without using CSS definitions. In this post I will discuss the method that utilizes CSS definitions. (For an example of Blogger menu bar with CSS definitions, visit this site: Much Ado About Nothing.)

Here are the steps that you should follow to create a menu bar for your Blogger/Blogspot site:

Step1: Create a new header page element. To do this, please refer to this post: New Header and Crosscol Elements.

Step2: Find the HTML section that is shown below and add the red-higlighted codes.

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

Step3: In the style sheet section of your template, add these CSS codes:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}

Step4: Save your template and go to the Page Elements tab. You will notice that a new page element box has been added above the header title. Click the Add a Page Element link and choose Link List as the new page element. You can now start linking pages from your blogsite posts or from other sites.