Fallback Page Nav Menu for Influence in case of javascript disabled

Resolved 3 replies theme theme-influence

11 years ago · Last reply by Andrew Misplon 11 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

Dinh Bao Dang 11 years, 4 months ago
Sorry, I messed up the [ code ] syntax. Look closely at the first code section. These are 2 code fragments.
Dinh Bao Dang 11 years, 4 months ago
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;
}
```
Andrew Misplon Staff 11 years, 3 months ago
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.