Responsive Web Design Menus

References

Navigation

Before we talk about RWD Menus, I want to make a few general remarks regarding navigation in a web site...

Navigation can make or break your site. The goal is to have the user get comfortable with your navigation as soon as possible.

The most important point about navigation is this: Your main navigation links should be either at the top of the page (underneath the banner or logo) or at the left edge of the page. It is not considered good design to have your main navigation links on the right or the bottom of the page.

On a small site, you can probably provide links to all of the pages from every page on the site.

But on a large site, you may have to divide the pages into categories and provide links to pages within each category, from a main category page for each section or category on the site. Each category main page, that is, would be an index into the category itself, with links to the pages in that category. Your main index page should have links to the category index pages.

Responsive Web Design Navigation

One of the greatest advantages of using the W3.CSS stylesheet is to easily create responsive menus.

One of the biggest challenges in making responsive menus is how to handle menus on small mobile devices.

The clever folks at W3Schools.com have made their w3.css stylesheet really easy to use, in implementing responsive menus.

Basic RWD Navigation Syntax

The main w3.css class for horizontal menus is w3-bar. The class w3-bar creates a "menu bar" horizontally across the page.

A related w3.css class for vertical menus is w3-bar-block. The class w3-bar-block creates a vertical container for menu items.

You usually use a <div> tag to create the menu container for either type of menu.

The "Navigation Bar" in the instructor's sample site is in the <div> tag that begins like this:

    <div class="w3-bar w3-grey" id="navContent">

To be more specific:

If you want a horizontal menu bar you need to use, at a minimum, these w3.css classes:

w3-bar in the menu's container
w3-bar-item in each of the menu items
w3-mobile, also, in each of the menu items (See the section "A Sample Horizontal Menu RWD Page" below for more details.)

Some other classes that you probably should add are:

w3-button in each menu item, to remove the underline, and to provide a grey background on hover.
w3-hover-<color> to change the default grey hover color.

If you want a vertical menu bar, you need to use, at a minimum, these w3.css classes and CSS styles:

w3-bar-block and w3-sidebar in the menu's container
A specific width (e.g.: 25%) in the selector for the menu's container
w3-bar-item in each of the menu items
A specific margin-left of the same percentage as the container's width (e.g.: 25%) in the selector for the container of the rest of the page's content

You can see an example of a horizontal menu bar in page horizontalbar.html. Right-click and view the page's source to see the HTML code. Then you can click on the name of the stylesheet horizontalbar.css to see the stylesheet.

You can see an example of a vertical menu bar in page sidebar.html. Right-click and view the page's source to see the HTML code. Then you can click on the name of the stylesheet sidebar.css to see the stylesheet.

Navigation issues (meaning: bad navigation designs) figure prominently in the sites that are "featured" in the Web Pages That Suck Web site. You might want to take a look, and try to find, in particular, sites that use "Mystery Meat" navigation. Sites which put their navigation on the right, or at the bottom, or in inconsistent locations, also make it to the "top" billings in the WPTS site.

Breadcrumbs

Breadcrumbs are NOT specific to, nor limited to, RWD pages. This is simply a good place and time to discuss them, in these eHandouts.

Breadcrumbs are a secondary navigation aid, just as a site map is a secondary navigation aid. (We will talk about the Site Map page later in the semester.) To navigate, site visitors mostly use the main navigation bar, but from time to time, your site users will want some way to determine where the currently-displayed page fits into the site, especially if the main navigation doesn't quite meet their needs or when they have opened a page that is deeper into the site's logical structure than the main navigation bar addresses.

Breadcrumbs use a single line of text and links to show the currently-displayed page's logical location in the site. Breadcrumbs make it easier for users to move around the site and to keep track of where they are in the site's logical organization.

As an example of breadcrumbs, take another look at the instructor's assignment-fulfilling site. When the "About Us" page is displayed, the line of text and links that looks like this ():

  > Home > About Us

is in the "breadcrumb" container in the page.

And as further examples, here are some sites that use breadcrumbs nicely. While you are looking at them, note how you can navigate back to previous sections of the site by using the breadcrumbs:

CDW (Look for "Home > Computers > Laptops & 2-in-1s > Laptops".)
Best Buy (Look for "Best Buy ▸ Computers & Tablets ▸ Laptops".)
Office Depot (Look for "Home / Furniture / Desks / Computer Desks / Computer Desks".)

Breadcrumbs have become fairly standard on most Web sites, and they almost always have these features:

They progress from the highest page level to the lowest, one step (page) at a time.
They start with the home page and end with the current page.
They have a simple text link for each page/level (except for the current page).
The breadcrumb that links to the Home page is actually a link to the index page. This link back to the index page might possibly need a target attribute with a value of "_top" (especially in a frame arrangement).
They have a simple, one-character separator between the pages/levels. This separator is usually >, which is >. Some sites use different separators such as ▸ which is ▸ ; or the slash character, which is /.

The one main question that usually arises at this point in the discussion is this: "Do I make the breadcrumbs follow the directory hierarchy, or the browser history, or something else?"

The answer is the "something else" and it is the logical relationship of the pages.

In the instructor's site, for instance, all of the pages are in the same directory. But the breadcrumbs on the Feedback Form page show that the Feedback Form is logically under the Media Kit page. And the good news is that you can make your breadcrumbs reflect whatever logical page relationships seem to make the most sense.

Now let's talk about how to put breadcrumbs into your pages. We will look at the breadcrumbs shown above for the "About Us" page.

I put a <div>...</div> tag around the breadcrumbs, like this:

  <div class="w3-container">
    <div id="breadcrumbs">
      > <a href="index.html">Home</a>
      > About Us
    </div>
    <h2>About Us</h2>
  </div>

Please note these points about the breadcrumb sample code:

The <div>...</div> tag containing the breadcrumbs is in the page that the breadcrumbs apply to, in this case, page about.html.
Every breadcrumb except the current page is a link to a page logically (not historically) leading to the current page.
The breadcrumb that links to the Home page is actually a link to the index page (index.html).

Just one more note about breadcrumbs: One of the main articles which got breadcrumbs "on the map", so to speak, is Jakob Nielsen's Alertbox of April 9, 2007, from which I drew much of what is in this section of the handout.

A Sample Horizontal Menu RWD Page

The sample page below will show you one way that you can put a horizontal menu at the top of the screen, but to have it "stack" vertically on small devices.

Please note these basic features of how the w3.css RWD menu system works:

Just as on any w3.css RWD page, there are basically three "modes" of screen display that are implemented. They are:
1. Large screen, such as a laptop or desktop computer.
2. Medium screen, such as a tablet or iPad.
3. Small screen, such as a smart-phone.
You can, by the way, simulate these three screen sizes by grabbing the right border of your browser window with your mouse, and pulling it to the left. As the browser's window decreases in width, note what happens to the items in the page:
1. They become smaller. This is a major feature of RWD: Items (such as divs, sections, and images) change their size to fit the screen.
2. They reach the point where is makes more sense to shuffle the content items around and alter the page's layout. This layout alteration is also a major feature of RWD. In the sample page below, the w3-third classes take a width of 100% in a small display screen, so they "stack" vertically.
3. The menu items also take a width of 100% in a small display screen, so they also "stack" vertically. (See the notes below regarding the w3-mobile class.)

Here is the source of the sample page. This is page w3Navb.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>W3.CSS Menu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="w3sampleStylesb.css" media="screen">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>

<header class="w3-content w3-red w3-padding">
   <h2>Sample w3.css Nav Page</h2>
</header>
<br>

<div class="w3-bar w3-red">
  <a href="w3Navb.html" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="w3Navb1.html" class="w3-bar-item w3-button w3-mobile">Page 1</a>
  <a href="w3Navb2.html" class="w3-bar-item w3-button w3-mobile">Page 2</a>
  <a href="w3Navb3.html" class="w3-bar-item w3-button w3-mobile">Page 3</a>
</div>

<div class="w3-container">
  <div id="breadcrumbs">
    > Home
  </div>
</div>

<h2 class="w3-container">Home</h2>

<div class="w3-row">
  <section class="w3-third w3-container w3-green">
     <h3>Section 1</h3>
  <p>This is a paragraph in section 1.</p>
  </section>
  <section class="w3-third w3-container w3-indigo">
     <h3>Section 2</h3>
     <p id="firstParagraph">This is a paragraph in section 2.</p>
  </section>
  <section class="w3-third w3-container w3-teal">
     <h3>Section 3</h3>
     <p id="firstParagraph">This is a paragraph in section 3.</p>
  </section>
</div>
<br>
<footer class="w3-content w3-blue w3-padding">
  <p>&copy; Copyright 2019</p>
</footer>
</body>
</html>

Here is the local stylesheet, w3sampleStyles.css:

html
{
  box-sizing: border-box;
}

*, *:before, *:after
{
  box-sizing: inherit;
}

header
{
  width: 25em;
}

footer
{
  width: 12em;
}

Let's look at some of the most important features and usage of the w3.css navigation/menu classes, as shown in the above page's code:

The w3-bar class in the first <div> tag creates the normal, horizontal menu bar across the top of the page.

You can add a background color to the menu bar with one of the "w3-" color classes, such as w3-grey, w3-green, etc.
Each of the menu items (the <a> tags) has the classes w3-bar-item, w3-button, and w3-mobile in them.

You can override the default light-grey "hover" color of the w3-button class, with one of the "w3-hover-" color classes, such as w3-hover-indigo, etc.
The class w3-mobile instructs the page to vertically stack the menu items in a small screen.

A Sample Vertical Menu RWD Page

The sample page below will show you one way that you can put a vertical menu at the left of the screen, and to allow the rest of the page to "stack" vertically on small devices.

Please note these basic features of how the w3.css vertical RWD menu system works:

The w3-bar-block class in the navigation <div> tag creates the vertical menu bar along the left side of the page.
The <div> tag which creates this vertical menu bar also has these features:
- It has the class w3-sidebar in it.
- The CSS selector for this <div> tag has the style property
```
width: 25%;
```
The <div> tag which contains the rest of the page has the CSS style property
```
margin-left: 25%;
```
So does the <footer> tag's selector.
Each of the menu items (the <a> tags) has the class w3-bar-item in them.

Here is the page vertMenu.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vertical RWD Menu</title>
  <meta charset="UTF-8">
  <meta name="description" content="Introduction to designing and making Web sites">
  <meta name="keywords" content="Web Design,HTML,CSS">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css" media="screen">
  <link rel="stylesheet" type="text/css" href="vertMenu.css" media="screen">
</head>

<body>

<div id="content">
	<div class="w3-bar-block w3-sidebar w3-grey" id="navContent">
	  <a href="index.html" class="w3-bar-item w3-hover-indigo">Home</a>
	  <a href="about.html" class="w3-bar-item w3-hover-indigo">About Us</a>
	  <a href="portfolio.html" class="w3-bar-item w3-hover-indigo">Portfolio</a>
	  <a href="media.html" class="w3-bar-item w3-hover-indigo">Media Kit</a>
	  <a href="resources.html" class="w3-bar-item w3-hover-indigo">Resources</a>
	  <a href="contactus.html" class="w3-bar-item w3-hover-indigo">Contact Us</a>
	  <a href="sitemap.html" class="w3-bar-item w3-hover-indigo">Site Map</a>
	</div>
	<div id="mainContent" class="w3-container">
    <header>
       <h2>RWD Vertical Menu</h2>
    </header>
    <div class="w3-container">
  	<div id="breadcrumbs">
  	  > Home
  	</div>
    </div>
    <section id="section1" class="w3-container w3-row">
       <h3>Section 1</h3>
  	 <div class="w3-container w3-quarter">
         <p id="firstParagraph">This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1. This is a paragraph in section 1.</p>
  	 </div>
  	 <div class="w3-container w3-half">
         <p id="secondParagraph">This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. This is the second paragraph in section 1. </p>
  	 </div>
  	 <div class="w3-container w3-quarter">
         <p id="thirdParagraph">This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. This is the third paragraph in section 1. </p>
  	 </div>
    </section>
  </div>
  <footer class="w3-container w3-grey">
    <p>&copy; Copyright 2017</p>
  </footer>
</div>

</body>
</html>

Here is the stylesheet, vertMenu.css:

body
{
  margin: 0;
}

#navContent
{
  width: 25%;
}

#mainContent, footer
{
  margin-left: 25%;
}

A Sample Vertical Menu RWD Page with @media queries

The sample page below will show you another way that you can put a vertical menu at the left of the screen, and to allow the rest of the page to "stack" vertically on small devices.

This second vertical menu sample will use @media queries to (hopefully) more gracefully control the sidebar's width in various screen sizes.