HTML5 and CSS3 Fundamentals – Navigation Menus

A Definitive Guide to Using the Navigation Menus in HTML Pages

In this lesson, we look at how you can use the navigation menus to help you create a usable website. A good website is that website that is usable. One way of making this a reality, is by using the navigation menus. Having an easy-to-use navigation can help the visitors locate any information they’d like to read in a stress-free manner.

Having said that, it is important to learn how to organize your navigation menus—to help your visitors browse your site in a stress-free manner. CSS can help you transform any lackluster HTML menus into stunning navigation menus that will make your website usable.

Well, at the core of CSS navigation menus; the navigation menus can be viewed as a series of lists. So, the lists will form our background discussion on how we can use the navigation menus in HTML pages.

There are two approaches that you can use:

  • CSS list styles
  • CSS with NAV tags

So, let us find out how we can create navigation menus in HTML pages.

CSS List Styles and Navigation Menus

Lists in HTML are specified by the unordered list (UL) and the ordered list (LI) tags. We can use these tags to specify how we would like our menus to appear on a web page. For instance, the example below illustrates how we can create a “Home Page”, “About Us”, “Contact Us” links in a web page:


<UL>

<LI><A href="Homepage.html">Home Page</A></LI>

<LI><A href="About Us.html">About Us</A></LI>

<LI><A href="Contact Us.html">Contact Us</A></LI>

</UL>

We can modify the above list by removing the bullets since we’ve used the ordered list to specify the “Home Page”, “About Us”, “Contact Us” links on the web page (We learned that by default, the ordered lists use bullets).

So, how can achieve this? Good question.

We go back the CSS basics on how lists can be styled. The list-style-type property of CSS lists comes in handy. We will use this property to remove all the bullets in the list—since navigation menus should not have bullets.

Here’s how you can remove the bullets:


UL {

list-style-type: none;

}

We can also style the <A> elements, by placing a vertical navigation bar as follows:

A {

display: block;

width: 60px;

}

In the above example, the display: block is used to display the links as block elements so that the whole link area becomes clickable with your mouse. The width: 60px in indicates the width of the block.

Having used CSS lists with your navigation menus, your HTML code should look like one below:

<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
UL {
    list-style-type: none;
}
A {
    display: block;
    width: 60px;
    background-color: #00EE22;
}
</STYLE>
</HEAD>
<BODY>
<UL>
  <LI><A href="Homepage.html">Home Page</A></LI>
  <LI><A href="About Us.html">About Us</A></LI>
  <LI><A href="Contact Us.html">Contact Us</A></LI>
</UL>
</BODY>
</HTML>

To use the Horizontal navigation bar, you can use the inline or floating list items of the display property for lists. For instance, the HTML code shows how you can insert a horizontal navigation bar in your navigation menus:

LI {

display: inline;

}

Or alternatively, you can use the <NAV> tag to create your navigation links, especially if you’d like to have a major block for your navigation links. For instance we could specify the navigation links using the HTML code below, where the <NAV> tags  have replaced the <UL> tags to create blocks for our navigation links:

<NAV>
  <A href="Homepage.html">Home Page</A>
  <A href="About Us.html">About Us</A>
  <A href="Contact Us.html">Contact Us</A>
</NAV>

By default, the <NAV> uses the block style, that’s why in the example above the navigation links will be blocked together.

Well, go ahead and start implementing a website project by utilizing all that we’ve learnt about HTML links, including the in-page links, the link styles and navigation menus.

 

Online Technology Courses Stone River eLearning
GET YOUR FREE HTML5 & CSS3 EBOOK!

Comments