23

23Landing page differences

23.2

The navigation bar

Let’s look at how it starts:

landing page (index.html) navigation bar
<header id="js--000000">
<!-- ********************************************************************** [WP TOPNAV]
     TOP NAVIGATION (ABOVE CONTENTS LIST)
     *******************************************************************-->

     <nav class="nav-cover">               <!-- Start of top navigation bar -->
         <div class="top-nav">             <!-- Start of top navigation row -->
             <div class="rg-row">          <!-- Start of navigation button row -->
                 <!-- Button 01 - Previous Section -->
                 <div class="nav-wide" ></div>
                 <!-- Button 02 - Previous Chapter -->
                 <div class="nav-wide" ></div>
                 <!-- Button 03 - Home wide (hidden when fixed nav activates) -->
                 <div class="nav-wide nav-home" ></div>
                 <!-- Button 03a - Top narrow (hidden until fixed nav starts) -->
<a class="nav-narrow js--sc-000000" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
                 <!-- Button 03b - Home narrow (hidden until fixed nav starts) -->
                 <div class="nav-narrow"></div>
                 <!-- Button 04 - Next Chapter -->
<a class="nav-wide" href="01-00-introduction.html#js--000000"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
                 <!-- Button 05 - Next section -->
<a class="nav-wide" href="01-00-introduction.html#js--010000"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
             </div>                        <!-- End of navigation button row -->
         </div>                            <!-- End of top navigation row -->
     </nav>                                <!-- End of top navigation bar -->
<!-- ====================================================================== [WP END] -->
Code 23.1   Landing page navigation HTML

This compares with a navigation bar from a normal page:

typical navigation bar html
<header id="js--000000">
<!-- ********************************************************************** [WP TOPNAV]
     TOP NAVIGATION (ABOVE CONTENTS LIST)
     *******************************************************************-->

    <nav>                                               <!-- Start of top navigation bar -->
        <div class="top-nav">                           <!-- Start of top navigation row -->
            <div class="rg-row">                        <!-- Start of navigation button row -->
                <!-- Button 01 - Previous Section -->
<a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
<!-- Button 02 - Previous Chapter -->
<a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
<!-- Button 03 - Home wide (hidden when fixed nav activates) -->
<a class="nav-wide nav-home" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<!-- Button 03a - Top narrow (hidden until fixed nav activates) -->
<a class="nav-narrow js--sc-000000" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
<!-- Button 03b - Home narrow (hidden until fixed nav activates) -->
<a class="nav-narrow" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<!-- Button 04 - Next Chapter -->
<a class="nav-wide" href="#js--000000"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
<!-- Button 05 - Next section -->
<a class="nav-wide" href="#js--000000"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
            </div>                                      <!-- End of navigation button row -->
        </div>                                          <!-- End of top navigation row -->
    </nav>                                              <!-- End of top navigation bar -->
<!-- ========================================================================== [WP END] -->
Code 23.2   Navigation bar for other pages

The first change is to the <nav> element itself, on the landing page the <nav> element has been given the class nav-cover, this has the CSS:

landing page navigation bar CSSl
.nav-cover { display: none}          /* Hide top nav bar on cover page */
Code 23.3   Landing page navigation bar CSS

This sets the navigation bar to be invisible, it just is doesn’t show up at all on the page.

  • The fixed-nav class that is applied to activate the sticky nav (§ 18.4) has the CSS rule display: inline, this makes the <nav> element visible again for the sticky nav.

The sticky nav stuff still works, when the ID js--fixed-nav reaches the top of the screen, the whole sticky navigation effect kicks in and the navigation bar is displayed (the nav-cover class is overruled).

This time though the navigation bar has been tweaked to remove the links we don’t want. This is done directly in the HTML.

A typical navigation bar has seven buttons all with links of some description:

  • Button 1  — Previous section (wide button)

  • Button 2  — Previous chapter (wide button)

  • Button 3  — Home (wide button)

  • Button 3a — Top (narrow button)

  • Button 3b — Home (narrow button)

  • Button 4  — Next chapter (wide button)

  • Button 5  — Next section (wide button)

When the sticky navigation activates, the wide button 3 is replaced with the narrow buttons 3a and 3b.

In the case of the landing page, we don’t want buttons 1, 2, 3 or 3b. When I say we don’t want the buttons, we want to keep the physical boxes, but we don’t want any text or clickable links in them.

To do this, I’ve simply replaced each anchor element for buttons 1, 2, 3 and 3b with an empty div element with the same classes.

Thus the original button 1:

<!-- Button 01 - Previous Section -->
<a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>

Becomes:

<!-- Button 01 - Previous Section -->
<div class="nav-wide" ></div>

The same is true for the other empty buttons:

<!-- Button 02 - Previous Chapter -->
<a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
<div class="nav-wide" ></div>

<!-- Button 03 - Home wide (hidden when fixed nav activates) -->
<a class="nav-wide nav-home" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<div class="nav-wide nav-home" ></div>

<!-- Button 03b - Home narrow (hidden until fixed nav activates) -->
<a class="nav-narrow" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<div class="nav-narrow"></div>

The red is the typical link, the green is the same link modified for the landing page.

In all cases, the anchor is replaced with an empty div that has exactly the same classes.

These div elements just show as empty boxes of the correct with and in the correct positions.

  • This technique of replacing the anchor element with a div can be used on any page that does not have a previous or next section (the first and last chapters usually).



End flourish image