How to create a menu bar in Caspio

[sbrown106]

Hi, could somebody give me guidance or point me to a tutorial that explains how to create a menu bar in Caspio

please ?

 

Many thanks,

Stephen

[ParkLoey]

Hey there Stephen  not sure if you want to achieve the same thing, but I found a forum post that talks about creating a navigation bar -> 

The thread contains several suggestions, too. Hope this helps! 

[imJihyo]

Hi guys! Just found a video about adding a navigation menu. This might be helpful as well

https://youtu.be/XCxGl1aUixk

 

- Jihyo ♥

[Aether]

Hi @sbrown106 - You can also check this techtips tutorial about creating a different navigational menu:
https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-tabbed-navigation-for-multiple-datapages/
https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-creating-a-floating-navigation-menu/

I hope this helps  

[telly]

Hi @sbrown106,

You may check this link: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/tech-tip-creating-a-floating-navigation-menu/ and https://www.w3schools.com/css/css_navbar.asp

I hope that helps
 

[Kaushik21]

I think this link will help you to create   a menu bar in Caspio

 

[CharlySpancer]

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 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>

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

[astroboy]

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:

- https://howto.caspio.com/parameters/parameters/
- https://howto.caspio.com/parameters/parameters-as-query-string-values/

[DaveS]

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...

[NailDyanC]

Just want to add to the previous comments above, Caspio has an article about custom navigation menu based on user role that will help you customize your navigations depending on th role of a user: https://howto.caspio.com/tech-tips-and-articles/customizing-navigation-menu-based-on-user-roles/

[Flowers4Algernon]

Hello! You may also want to check out this related forum post: