Tech Tip: Creating 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 Web User Authentication. Once protected, the navigation menu will appear only for logged in users.

See a live demo

Steps to create a floating navigation menu:

Create a new HTML DataPage

In the Caspio Bridge Explorer window go to the DataPage view. If you would like the Navigation Menu to be password protected, navigate to your password protected folder. Click the New button to create a new DataPage. Select Custom DataPage type and HTML Page. Click Next. Select the same Style that you are using for the rest of your site (this is only needed to style the login screen). Click Next.

Create a menu in the HTML block

This 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 this code into the HTML block of your HTML DataPage. Feel free to adapt this example if necessary. Also, be sure to include the provided logout link.

#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 to the Header and Footer of your Login screen and adding a JavaScript 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 you password protect this DataPage, 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/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>

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.