Updated 9/27/2017 at 7:40pm

Responsive Web Design Menus


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.


Basic RWD Navigation Syntax

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

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


RWD Navigation Design

A current topic of much discussion on web-design blogs is how and where to implement menus on small mobile devices.

One such discussion is Why Mobile Menus Belong at the Bottom of the Screen.


A Sample RWD Menu Page

So the sample page in this eHandout will show you one way that you can put the menu at the bottom of the screen on small devices.

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

Here is the source of the sample page. This is page w3Nav.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="w3sampleStyles.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 w3-hide-small w3-show-medium w3-show-large">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small">Link 3</a>
</div>

<div class="w3-bar w3-red w3-bottom w3-show-small w3-hide-large w3-hide-medium">
  <div class="w3-container"><a href="#" class="w3-button">Home</a> <a href="javascript:void(0)" class="w3-button w3-right" onclick="myFunction()">&#9776;</a></div>
</div>

<div id="demo" class="w3-bar-block w3-bottom w3-red w3-hide w3-hide-large w3-hide-medium">
  <div class="w3-container"><a href="#" class="w3-button">Home</a> <a href="javascript:void(0)" class="w3-button w3-right" onclick="myFunction()">&#9776;</a></div>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-row">
  <section class="w3-third w3-container w3-green">
     <h3>Section 1</h3>
  <p>In this example, the navigation bar is replaced with a button (&#9776;) in the top right corner when 
    shown on small mobile devices. When the button is clicked, the links in the bar will vertically stack.</p>
  <p>Resize the screen to see the effect.</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 2017</p>
</footer>
<script>
  function myFunction() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
  }
</script>

</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: