Creating a Floating Navigation Menu

3 minutes to read

This article will guide you on how to 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.

Steps:

Create an HTML DataPage.
1. On the DataPage Data Source screen, select the same style that you are using for the rest of your site. It is needed to style the sign-in screen.
2. Restrict access to your DataPage.
3. 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. In the Page Design screen, insert the below code. Feel free to adapt this example if needed. Ensure to include the provided logout link by clicking Properties on the Authentication.

Optional: If you have more than one DataPage on each webpage, multiple sign-in screens are displayed. In this case, you can hide all but the first sign-in screen by adding HTML code to the Header & Footer of your sign-in 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 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, the navigation will be free floating and will not appear at the embed code location.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio 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.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<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 id="menu">
<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>