header 2000

5 Menus and Navigation

In this chapter, we will begin with creating simple menus and work our way up to more complex menus. This chapter is divided into four parts:

5.1 Create Responsive Drop Down Menus

5.2 Create a Mega Menu

5.3 Create a Module Menu

5.4 Create a Slideshow Header Menu

In Section 5.1, we will build and style responsive 2 level menus - also called drop down menus.

In Section 5.2, we will build expandable mega menus.

In Section 5.3, we will cover how to use feature boxes to create full page menus.

In Section 5.4, we will explain how to create header images and use multiple rotating header images to create a slideshow header menu.

Here is an example of an expandable mega menu:

5.0.01

A navigation bar or menu is simply a series of links displayed horizontally across a web page. A well organized main menu is a crucial part of any web page. Think of it as being the Table of Contents for your online book. After the header image at the top of your web page, your main menu should be the first thing that your readers see. They will review the menu items before even reading the welcome article. So the structure, naming and appearance of each menu item will matter a great deal.

We will begin by creating a basic one level menu with the Bluefish Editor. Create a new root folder called My Menu Website. Then open your Bluefish Editor and create a new index.html file using the HTML 5 document type. Copy and paste the finished heading CSS and body HTML from the index.html we worked on in the last chapter. Then open your index.html page and verify that everything still looks OK.

CSS Selector Types and Combinations
Structuring and styling menus is mainly done through using a variety of CSS selector types. We therefore need to cover this topic in greater detail before creating our first menus. In an earlier chapter, we covered three different types of selectors. These were Element Selectors, Class Selectors and ID Selectors. Here are examples of all three: div, div.classname and #id_name. We later covered the Universal Selector (*).

Since then, we have minimized the use of ID selectors and used mainly Element Selectors and Class Selectors. But there are several additional types of selectors we will need to be familiar with in order to build menus. The first is a Global list of selectors. For example,

body, .wrapper, div.classname, a {color=”#0000FF”}

means make the text color for all of these selectors blue. Note that there is a comma after every selector except the last selector.

Next are Combination Selectors. This is where you not only name the class but also name the element you want the class to style. For example, div.classname is technically a combination selector because it tells the browser to use the class style only when it is associated with the element div.

You may notice that I often use a combination selector instead of merely styling the class. I do this not merely to apply the same class name to different elements and then style each combination differently, but also because when I am writing an extremely long CCS sheet, I want clues about what elements I have created classes for so I can find these classes in both my CSS and HTML.

There are also Pseudo-classes. Here is an example: a:hover {color: #FF0000}

Note the colon between the element and the state. This means when a persons cursor is hovered over a link name, the text color of the link name should change to red.

Next is the Descendant Selector. This is a way of targetting a particular element and styling it only when it occurs inside of another element. Here is a common example used in styling menus:

While horizontal drop down menus are the most common and space efficient form of website menu, expandable mega menus are becoming increasingly popular. There are several benefits to mega menus. The biggest is that if you have a huge number of menu items, you can have just a few top level categories and then have a several sub-categories in the drop down – each with its own sub-sub-menu items. You can also add images and even feature boxes inside of the mega menu drop downs.

Most tutorials on making mega menus are very complex. They involve replacing the normal list items with divides and then placing divides inside of divides. We will instead use a copy of our existing dropdown menu we created in the last section – and then add our mega menu inside of one of the list items. To see how this is done, create a new root folder called My Dropdown to Mega Menu Website. Then copy the index.html file from My Mobile Menu Website and paste it into our new root folder. Then open this new file with Bluefish and change the title to My Dropdown to Mega Menu Website. Then open the file with your browser to make sure it displays properly.

5.2.01

In the previous section, we created hidden drop down sub menus under the About Us and Contact Us top level menu items. Our goal in this section is to replace the About Us dropdown menu with a much larger mega menu. Let’s start with the HTML. Here is the HTML for our About Us drop down unordered list:

<ul><li><a href="#">About David</a></li>
<li><a href="#">About Mary</a></li>
<li><a href="#">About Our Best Friend Bill</a></li></ul>

We will carefully delete the second two list items. We will also delete the first list item and content leaving only the unordered tags. Here is the revised HTML: <ul></ul>

Now copy and paste this mega menu list item in between the unordered list tags.

<li><div class="dropdown-content">

<div class="header"><h2>Mega Menu Header</h2></div> 

<div class="row"><div class="column1"><h3>Category 1</h3>

<a href="#">Link 1.1</a><a href="#">Link 1.2</a><a href="#">Link 1.3</a></div>

<div class="column2"><h3>Category 2</h3>

<a href="#">Link 2.1</a><a href="#">Link 2.2</a><a href="#">Link 2.3</a></div>

<div class="column3"><h3>Category 3</h3>

<a href="#">Link 3.1</a><a href="#">Link 3.2</a><a href="#">Link 3.3</a></div></div></li>

Save this file and view it in a browser – hovering your cursor over the About Us Menu item to reveal our new Mega Menu Drop Down.

5.2.02

The mega menu is displayed as a single vertical column. We will add some CSS to make the box much wider and display the categories in three different columns. Add the following CSS just above the head closing tag:

At the end of the last section, we placed simple feature boxes inside of a hidden mega menu that drops down from a top level main menu item when the viewer hovers their cursor over that menu item. In this section, we will learn how to make more complex feature boxes and place them in rows that are always visible. The reason to use Feature Boxes instead of hidden drop down mega menus is that you do not run the risk of the your readers failing to hover over the parent menu items and thus not even seeing your beautiful mega menu feature boxes. Placing Feature Box Menus in rows where they are visible all the time also allows for more styling options than are available inside of a mega menu dropdown. Here is an example of four feature all placed in a single row.

5.3.01

These are feature boxes made inside of the Joomla Content Management System using Module Classes applied to Joomla Custom HTML modules. A module is a the term used by Joomla to refer to a box or block of content.

Examples of Simple Feature Boxes
We have already made simple feature boxes visible in rows at the end of our chapter on page layouts. Here is what these feature boxes look like.

5.3.02

So far, these boxes simply have a background color and a one sentence description. We will review how to style these boxes into more inviting links.

Eight Parts of a Feature Box
A Feature Box has eight parts each of which can be styled independently.

5.3.03

Use the Bluefish Editor to Style Feature Boxes

Create a new root folder called My Featue Box Website. Then copy the files and folders from our previous website example into this folder. Then open the index.html page with Bluefish and display it with your web browser to make sure the appearance is still correct. In this section, we will work on the row in our HTML file with a name or class called Container 1. Here is the current HTML for this row:

One of the latest trends in menus is to place a rotating slideshow in the header of your home page with links to important sections of your website. Think of it as like placing very large feature boxes in the header that rotate one at a time. This addes a sense of dynamic motion to your website that really attracts the attention of your views and gives you a much larger canvas to paint on. We will begin by dicussing how to put a single large image into your header with a similar Title, Description and READ MORE button as we used for our Feature Box Menu Items. We will then show how to rotate the header between two or more images.

Create a New Root Folder
Copy the root folder from our previous section and then rename it My Header Slideshow Website. View the index.html file in your browser to make sure it appears properly.

5.4.01

Currently, our header has a background linear gradient color and a foreground sentence. While we could have placed the text in an image, text will always be more crisp and easy to read if it is in the HTML rather than the CSS. There is a major problem with placing text in the foreground of our header. Make the browser narrower and you will see that the header text is not responsive. It remains the same size as the browser window narrows and therefore partially disappears below the main menu:

5.4.02

In the next chapter, we will explain how to use Viewport Units to make this text responsive and shrink in size as the browser window. But in this chapter, we will simply add the text to our images as we make the images and then place the images in the foreground. Then as the image shrinks along with the browser window, the text will automaticall shrink with it.

The text inside the foreground image will not be as sharp as foreground text in front of a background image. But this method is much easier than the methods we will describe in Chapter 6.

Here is the current HTML:

<header><h1>This is the header image for the Home page.</h1> </header>

Note that the header section is affected by the header element selector and the h1 element selector.

Here is the current CSS:

header {height: 80px; text-align: center; color: #999999; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);}

The h1 selector is not present in our current CSS. Therefore the web browser uses its own default settings for the h1 element except for those properties specifically defined in our custom header CSS settings. So the font size is still controlled by the browser because we have not provided any other settings for it. The first thing we will do is increase the height of the header section from 80px to 300px. This will give us a larger canvas to work with.

5.4.03

Next, we need to plan our header slideshow.

Plan Your Header Slideshow
The current header consists of a background gradient image and a foreground title. The header title, slogan and image will be at the top of every page of your website and will shape the viewer’s impression of your site. You want to take some time to create and install a good image which reflects the goal of your website. Remember that a picture is worth a thousand words – and images are everything!

On your Home Page (but not your other pages) we will add three more header slides that rotate with our normal header so that each of these four slides appears for 5 seconds. It will therefore take the viewer about 20 seconds to see the entire header slideshow.

9 Steps to Create your own Header
There are basically 9 steps in creating and installing your own custom header:
#1. Design your custom header
#2 Find and/or create your own header images
#3 Add text and Fake READ MORE button to the image.
#4 Optimize the file size of your image for the web
#5 Modify the height and width of your image
#6 Place a link to your header image in your header container
#7 Make your Header Image linkable
#8 Create and add your second through final images.
#9 Create a CSS autoplay transition to rotate between the images.

Let’s review these 9 steps to see how you can create and install your own header images and text. We will assume that you have been given the job of designing a rotating slideshow for a new business called Pet Education Center. Their slogan is “Where pets go to train their owners!”. They sell and train four kinds of pets: cats, dogs, birds and hampsters. They have given you an image of each kind of pet and left the rest up to you.