Jump to content

Common navigation file


Ron Brinkman

Recommended Posts

I have several goals with respect to navigation in my website:

1.       Have just a single-page navigation file that can be included (w3.includeHTML) into every web page rather than being repeated over-and-over on each web page.

         a.       Result: a change to navigation will require only one change to automatically update every web page on the site. Saves a lot of maintenance effort.

2.       Highlight the top level (main menu bar) button background that is currently selected with a different color (I use Teal)

3.       Make pages accessible on all device sizes (yeah, don’t we all)

         a.       On small screen implementations, implement slide-over drop-down menus

I first tried the solution at https://www.w3schools.com/w3css/w3css_navigation.asp but I have many items on the main menu, and when used on a smartphone they permanently take up a large portion of the screen

I am now trying the more promising approach at https://www.w3schools.com/css/css_rwd_templates.asp but the example is too simplistic in that the main menu item that contains a drop-down list (More) is not demonstrated for the small screen implementation.  So, here’s my current state.

Home page (I have named mine 0testHome.html)

<!-- 0testHome.html -->

<!-- see https://www.w3schools.com/css/css_rwd_templates.asp -->
<!-- and https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h -->
<!DOCTYPE html>
<html>
<title>Home</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body>
	<script src="https://www.w3schools.com/lib/w3.js"></script>

<body onload="hiliteFunction()" class="w3-content" style="max-width:auto">

<!-- Include navigation for the page -->
<div w3-include-html="/0testnavHome.html"></div>

<div class="w3-container" style="margin-top:46px">

Home 							 			  		 	<!-- Path to this page -->

<div id="screenSize"></div>

<div id="topButton"></div>
  
<h1>Home</h1>                                        	<!-- Page Title -->

<!-- page content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec egestas arcu. Aenean auctor ornare ipsum eget molestie. 
Quisque dictum metus ex, et tempus diam blandit eu. Vivamus cursus mollis egestas. Nullam commodo at odio sit amet gravida. 
Fusce pretium lectus tellus, sed fringilla erat faucibus id. Ut rutrum placerat dui, sed rutrum nisl ultrices vel. 
Nam consectetur pharetra sollicitudin. Integer lacinia auctor facilisis. Mauris non ante congue, rutrum lacus sed, laoreet metus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec egestas arcu. Aenean auctor ornare ipsum eget molestie. 
Quisque dictum metus ex, et tempus diam blandit eu. Vivamus cursus mollis egestas. Nullam commodo at odio sit amet gravida. 
Fusce pretium lectus tellus, sed fringilla erat faucibus id. Ut rutrum placerat dui, sed rutrum nisl ultrices vel. 
Nam consectetur pharetra sollicitudin. Integer lacinia auctor facilisis. Mauris non ante congue, rutrum lacus sed, laoreet metus.</p>

<!-- scripts -->
<script>
//This script is from https://www.w3schools.com/css/css_rwd_templates.asp
//...with example https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h
// Used to toggle the menu on small screens when clicking on the menu button
function navFunction() {
  var x = document.getElementById("navToggle");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

<script>
function hiliteFunction(x) {
  if (x === undefined) { 
      x = "unknown"; 
  }  
  let text = "<p>" + x + "</p>";
  document.getElementById("topButton").innerHTML = text;
}
</script>

<script>
w3.includeHTML();
</script>

<script>
let text =
"<p>innerWidth: " + window.innerWidth + "</p>" +
"<p>innerHeight: " + window.innerHeight + "</p>" +
"<p>outerWidth: " + window.outerWidth + "</p>" +
"<p>outerHeight: " + window.outerHeight + "</p>";

document.getElementById("screenSize").innerHTML = text;
</script>
</div>
</body>
</html>

Single-page navigation (named 0testnavHome.html)

<!-- 0testnavHome.html -->

<div class="w3-container">

<!-- see https://www.w3schools.com/css/css_rwd_templates.asp -->
<!-- and https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h -->
<div class="w3-top" style="max-width: 950px;">
  <!-- Navigation (Stays on Top) -->
  <div class="w3-bar w3-black">
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="navFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Home')">Home</a>

    <span class="w3-bar-item w3-hide-medium w3-hide-large w3-right">More &gt;</span>

    <div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-button">Menu 1 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 2</a>
      </div>
    </div>

    <div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-button">Menu 2 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 2</a>
      </div>
    </div>

    <div class="w3-dropdown-hover w3-hide-small">
      <button class="w3-button">Menu 3 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 2</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 3</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 4</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 5</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 6</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 7</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 8</a>
      </div>
    </div>

    <div class="w3-dropdown-hover w3-hide-small" w3-hide-small>
      <button class="w3-button">Menu 4 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 2</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 3</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 4</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 5</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 6</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 7</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 8</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 9</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 10</a>
      </div>
    </div>

        <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right" onclick="hiliteFunction('Menu 5')">Menu 5</a>
  </div>
</div>

<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navToggle"    class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" onclick="navFunction()" style="width: 45%; margin-top: 46px;">

    <div class="w3-dropdown-hover">
      <button class="w3-button">Menu 1<span class="w3-right">&gt;</span></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 2</a>
      </div>
    </div>

          <div class="w3-dropdown-hover">
      <button class="w3-button">Menu 2<span class="w3-right">&gt;</span></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 2</a>
      </div>
    </div>

    <div class="w3-dropdown-hover">
      <button class="w3-button">Menu 3<span class="w3-right">&gt;</span></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 2</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 3</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 4</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 5</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 6</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 7</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 8</a>
      </div>
    </div>

    <div class="w3-dropdown-hover">
      <button class="w3-button">Menu 4<span class="w3-right">&gt;</span></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 1</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 2</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 3</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 4</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 5</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 6</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 7</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 8</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 9</a>
        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 10</a>
      </div>
    </div>

        <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 5')">Menu 5</a>
  </div>
</div>

ISSUES

1.       [high priority] When viewed on a narrow screen or a smartphone, when hovering over Menu 1, for instance, the sub-menu choices (Item 1 and Item 2) drop down over the top of the other Menu 2 and Menu 3 choices.  I need the sub-menu choices to drop down next to the list of main Menu choices because covering up Menu items confuses the user.  Nothing I have tried (like w3-right) has succeeded in placing the sub-menu choices next to the Menu choices.

2.       [high priority] When the user makes a choice, I need the appropriate Home or Menu 1..5 button background to change to Teal (class=”w3-teal”).  I included a placeholder hiliteFunction() for the purpose of passing an argument to tell the Function which button to change, but I don’t know how to find the right button and change it.  Ideally an argument wouldn’t even need to be passed – if the sub-menu’s position in the hierarchy could be sensed, but passing an argument would be OK.  And of course, the Function would need to turn off the Teal background from the previous user selection.  Or better yet maybe there is a better way to do this without the Function.

3.       [pesky but minor] When viewed on a narrow screen or a smartphone, Menu 1 is always hilited even when not hovering over it.  I can’t see what’s making it stay hilited – none of the others hilite before being hovered over.

4.       [pesky, can cause future errors] The navigation file that is included (via w3.includeHTML) doesn’t refresh even if the parent page is refreshed; the cached navigation file is used.  Is there a way to force the included file to refresh every time the main page is loaded, just in case it has changed?

I appreciate any help you can provide addressing these issues.

LargeScreen.jpg

SmallScreenMenusDroppedDown.jpg

SmallScreenMenu1Hovered.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...