Jump to content
  • 0

How to create a menu bar in Caspio



10 answers to this question

Recommended Posts

  • 0
  • 0

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.
#menu {
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;
<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>

or you can contact this guys https://itmaster-soft.com/en/custom-web-application-development

Link to comment
Share on other sites

  • 0

I'm not sure if this can help with what you are trying to achieve, but just in case you are passing values from one DataPage to another, it's helpful to be familiar with parameters. Here are some HowTo articles that you may check for reference:


Link to comment
Share on other sites

  • 0

I've been working through this and now have a great menu - with drop-downs - that I'm happy with... most of the time.  

When I use the drop-down menu on tabular report data pages it appears behind some of the other elements...  specifically, the Download button (on a report where download is available), and the tabular report results.  

I've tried to experiment with z-index in both the style and in the menu css, but have had no luck.  Would love some ideas...

nav dropdown problem.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...