ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

HTML5 & CSS3 Techniques: Creating a Web Site Navigation List

Updated on May 6, 2014

Goals of this Tutorial: Create an Effective Navigation Template

The point of web design is not only to create and style content but also create templates which can either be simply reused or quickly modified to perform the same underlying task where a different styling or theme might be desirable.

In this tutorial we will look at how navigation lists were created in pre-HTML5/CSS days and how they have evolved with the introduction of the <nav> element tags.

Creating navigation Lists: Pre-HTML5 & CSS3

The hint for the new web developer should be that we talk about navigation lists, with the emphasis on the word list.

As illustrated in the following snapshots we start out with out skeleton HTML template. So now what's next? Well, our first step is that we are going to create an unordered list:

<ul>
</ul>


Now, the purpose of a navigation list is to to like to other pages in the web site. So the next item(s) to add will be anchor tags. Anchor tags (we limit the scope of our example here to high level linking of pages) as you may recall have a format of:

<a href=web page location (filename)>Some display text</a>


For experimentation purposes you can create list items using a dummy href, reference value,of #, in an anchor tags. Naturally, as you develop web pages for your web site you would want to replace the references with appropriate filenames during development and file locations for deployment.

Generally, one would have entries for Home, Content, Contact, etc.

So we would come up with a basic list as illustrated in the snapshots below.

Initial Navigation List

Not very impressive. But this illustrates the basic structure. There is a list of clickable links.The links are dummy links to the current page (i.e. #).
Not very impressive. But this illustrates the basic structure. There is a list of clickable links.The links are dummy links to the current page (i.e. #).

Navigation Refinement #1: Change Display to Inline

Our first example is not too impressive. The thing to notice and we will refer to how items in a page are displayed is that list items are displayed as a block. this is noticeable if we look at a little trick of using background-color as is illustrated in the snapshot. Using different background colors for elements can be very helpful in page layout. There is nothing wrong with a vertical navigation list but for this example we will assume that we want to achieve a simple inline or horizontal list. This can be achieved through our stylesheet (or for the purposes of ease of illustration we will continue to place our styling in the header <style> elements).

Change to Inline Display

We use width and color to emphasize certain aspects of our navigation list. Color and specific size helps make  the layout more "concrete" when experimenting with design.
We use width and color to emphasize certain aspects of our navigation list. Color and specific size helps make the layout more "concrete" when experimenting with design.

Navigation Refinement #2: Remove Underlines & Change Fonts

It's pretty standard for web users to recognize a navigation bar as a set of hyperlinks, so we probably don't want the underlines. To eliminate the underlines we set text-decoration to none. We choose to target only anchor tags in unordered lists. Choose to be as specific as possible when specifying CSS markup!

Times New Roman is probably not the font you want to use for the list items, a san-serif font gives a cleaner look. You can experiment with fonts by specifying the font-family attribute.

Changing text-decoration and font-family

Underlines are removed by specifying text-decoration:none and font-family has been set to sans-serif, which loks somewhat cleaner for navigation bars especially if you want to create a distinct font-size/font from that of  your content.
Underlines are removed by specifying text-decoration:none and font-family has been set to sans-serif, which loks somewhat cleaner for navigation bars especially if you want to create a distinct font-size/font from that of your content.

Navigation Refinement #3: Padding, Color, Hovering

The values look kind of crowded, so let's apply some padding. using the padding-right attribute.

It's not apparent that the items in the navigation bar are clickable links, although the pointer does change when we hover over them. To modify the list items when we hover over them we use the pseudo-class “hover”. and can change anything we want: font-size, text-decoration, color, etc.

The snapshots show changing both the font-size and the element color.

Adding Padding and "hover" Effects

In this snapshot we have added some padding right to the elements to give them some breathing room.
In this snapshot we have added some padding right to the elements to give them some breathing room.
One CSS technique would be to use the hover pseudo-class for the anchor tags. To illustrate we used a font-size change, perhaps a better modification would be a text color change.
One CSS technique would be to use the hover pseudo-class for the anchor tags. To illustrate we used a font-size change, perhaps a better modification would be a text color change.
This illustrates the use of color when hovering over an anchor tag.
This illustrates the use of color when hovering over an anchor tag.

Navigation Enhancement #4: Changing to New Element Type

Prior to HTML5 it would be common to wrap this list items in a <div>. Remember, a <div> is just a container or "bucket", it has no semantic meaning but allows targeting for styling. Well, with HTML5 this changed with the introduction of the <nav> element. It was intended to impart some semantic meaning to the links associated with either page navigation or navigation with a page itself. It's major benefit is it like some of the other new HTML elements (e.g. section, footer, aside) help to create cleaner code and perhaps assist screenreaders.

Wrap Up and What's Next on the Topic

We have covered some of the basics of creating a navigation list. We started with a list in its standard display format and modified it with anchor tags to turn it into a navigation list. We used styling to present the list in a pretty standard horizontal format (although a vertical format is often effective as well). Eliminating bullets and underlines was next. We looked at the use of the CSS hover pseudo-class to highlight that the the items were clickable.

We discussed briefly the fact that there is a new HTML <nav> tag replacing what is still quite common in code, wrapping the list in <div> tags for both emphasizing the importance of the list as a navigation method and as a convenience for applying styling.

Lots more is possible. Nicely formatted text is not the only options for what we specified as text for the anchor tags. The coding is a little more involved if you decide to represent images as your links, for example, but it does make for a dramatic effect. We will look at that and other possibilities next time.


Please Rate This Introduction to Developeing Navigation Lists

Cast your vote for Was this a good introduction to HTML navigation lists?

Comments

    0 of 8192 characters used
    Post Comment

    • hotwebideas profile image

      Bruce Chamoff 

      4 years ago from New York

      Hey, this is a great article on web navigation using HTML 5. Do you have anything on a hub that talks about pull down menus in a web navigation bar?

      Bruce

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)