Home>Support>Fallback Page Nav Menu for Influence in case of javascript disabled

Fallback Page Nav Menu for Influence in case of javascript disabled

Hello,

I added a Fallback Page Navigation menu to the site.

If a user with deactivated javascript visits the website, he cannot open the menu and hence cannot browse between pages.

I think there should be some kind of fallback, to maximize the reachable audience. Usability > Design.

I just build a clumsy fallback. Better would be progressive enhancement applied on the actual menu.

This is one proposal:

Target:

* enable users without javascript to browse through pages
* only display it as fallback

Implementation:

* write a fallback menu into the DOM
* hide it with javascript on documentReady
* if user has javascript -> menu will be hidden
* if user has no javascript -> menu will be visible, because hiding needs javascript
* it will be a horizontal list displaying the pages

Add to style.css

/* Fallback page nav menu */
#fallback-page-menu {
  background: black;
}
#fallback-page-menu a:link, a:visited {
  color: white;
  text-decoration: none;
}
#fallback-page-menu li{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
[code]

Add to header.php into the <head> area

[code]
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#fallback-page-menu").css("display","none");
  });
</script>

Add to header.php before

<div id="fallback-page-menu">
   <?php wp_nav_menu( array('theme_location' => 'primary') ) ?>
</div>

Greetings

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 11 months ago Dinh Bao Dang

    Sorry, I messed up the [ code ] syntax. Look closely at the first code section. These are 2 code fragments.

  2. 9 years, 11 months ago Dinh Bao Dang

    I made a mistake at the css. The anchor part is wrong. here corrected:

    #fallback-page-menu a:visited,
    #fallback-page-menu a:link {
      color: white;
      text-decoration: none;
    }
    
  3. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi again Dinh Bao Dang

    I agree, a fallback navigation option would be a good way to go here. Thanks again for your contributions here. I’ll log another ticket for Greg to attend to in this regard.

    All the best with your site.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More