Create a Floating Navigation Menu

This article outlines how you can use an HTML DataPage to quickly create a floating navigation menu that appears fixed to the browser window regardless of scrolling. Because you can embed Caspio DataPages in as many places as you want, there will be only one place to update any future site navigation changes.

If you are using password protection, it may also be a good idea to protect your site navigation using Caspio’s Authentication. Once protected, the navigation menu will appear only for logged in users.

See a live demo

Steps to create a floating navigation menu:

  • Navigate to the DataPages listing and click New DataPage. Select HTML as Datapage Type.
  • On the DataPage DataSource screen, select the same Style that you are using for the rest of your site (this is only needed to style the login screen).
  • Restrict access to the DataPage using Authentication object and navigate to the HTML Source screen.
  • The navigation menu is created using list items and links. It uses a floating div tag to attach the menu to the upper right corner of the browser window. Copy and paste the below code into the HTML Page Source area of your HTML DataPage. Feel free to adapt this example if necessary. Also, be sure to include the provided logout link by clicking Properties on the Authentication.
<style>
#menu {
margin:0;
list-style: none;
width: 140px;
text-align: center;
}

#menu li {
font: 90% "Arial", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#menu a {
background: #222;                           /*Standard Color*/
border-bottom: 1px solid #000000;
color: #ccc;
display: block;
margin: 0;
padding: 20px 12px;
text-decoration: none;
}

#menu a:hover {
background: #004400;                    /*Hovered Color*/
color: #fff;
text-shadow:#ffffff 0px 0px 5px;              /*Text Glow*/
padding-bottom: 20px;
}
</style>
<div style="position:fixed; top:0; right:0;">
<ul>
<li><a href="link1" title="Link1">Link1</a></li>
<li><a href="link2" title="Link2">Link2</a></li>
<li><a href="logoutURL" title="Logout">Logout</a></li>
</ul>
</div>

Remove Multiple Login Screens if necessary

If you have more than one DataPage on each webpage, you will notice that multiple login screens are displayed. You can hide all but the first login screen by adding HTML code to the Header & Footer of your Login screen and adding a JavaScript code at the end of each webpage. Since the floating navigation menu is likely to be applied on many pages, copy the JavaScript from the How to Hide Multiple Login Screens article and add it to each page at the same time as the menu deploy code.

Embed the floating navigation menu

Now you can embed the floating navigation menu into the body of each page of your website. Click the Deploy button, copy the embed code, and paste it into each webpage where you would like the floating menu to appear. If this DataPage is authenticated, the login screen will appear at the location of the embed code (assuming it is not hidden using the method from the previous step). Once your user has logged in, however, the navigation will be free floating and will not appear at the embed code location.

<blockquote><img src="http://howto.caspio.com/wpHowTo/wp-content/images/31.png" alt="Note"><strong> Please note:</strong> This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.</blockquote>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.