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: 

 

[DrSimi]

Hi everyone,

I wanted to share a method to have a floating navigation menu or sidebar menu that is pretty much copied over from this great article: Poppin' In | CSS-Tricks

As you can see, this makes use of a pretty newly supported element attribute: popover. To create your nav menu, simply create an App Parameter as Long Text, and paste the code below. Do not forget to modify the <li> and <a> elements at the bottom with your desired text and links.

Then, you can use this App Parameter in the Header of your DataPages as needed.

Note I just converted SCSS from the last codepen in the article to pure CSS and made minor adjustments like changing the background color:

<style>
@import "https://unpkg.com/open-props";
.page-wrap {
  transition: translate 0.5s;
}
header {
  display: flex;
  justify-content: end;
}
.menu-trigger {
  background: #0000008a;
  border: 1px solid currentcolor;
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  place-items: center;
  text-decoration: none;
  transition: background 0.25s filter 0.25s;
}
.menu-trigger svg {
  fill: #fff;
  max-inline-size: 30px;
}
.menu-trigger:has(:hover, :focus-visible) {
  background: #000;
  filter: brightness(50%);
}
#flyout {
  background-color: var(--gray-0);
  box-shadow: var(--shadow-6);
  height: 100vh;
  position: fixed;
  inset: unset;
  top: 0;
  left: 100%;
  translate: 0;
  transition: translate 5s ease-in;
  width: 250px;
  z-index: 2;
}
nav[popover] ul {
  display: flex;
  flex-direction: column;
  line-height: 1;
  list-style: "";
  margin: 0;
  padding: 0;
}
nav[popover] ul li {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 1rem 0;
  transition: background 0.25s;
}
nav[popover] ul li a {
  color: var(--orange-8);
  margin-inline-start: 5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: translate 0.25s;
}
nav[popover] ul li a:is(:hover, :focus) {
  color: #fff;
  translate: 1ch 0;
}
nav[popover] ul li:not(:last-of-type) {
  border-block-end: 1px solid var(--orange-8);
}
nav[popover] ul li:has(:hover, :focus-visible) {
  background: var(--orange-10);
}
body:has(#flyout:popover-open) .page-wrap {
  translate: -250px 0;
}
[popover] {
  overflow: hidden;
}
#flyout:popover-open {
  animation: slide 0.5s forwards;
  border: 0;
  opacity: 1;
}
#flyout::backdrop {
  background: rgba(38, 38, 38, 0.5);
  backdrop-filter: blur(8px);
  transition: opacity 0.5s, display 0.5s, overlay 0.5s;
}
@keyframes slide {
  to {
    translate: -250px;
  }
}

</style>

<button popovertarget="flyout" class="menu-trigger" href="#">
        <svg viewBox="0 0 448 512" width="100" title="bars">
      <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
  </svg>
        <span>Menu</span>
      </button>
<nav popover id="flyout">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Hope this helps someone!

[kpcollier]

Nice, popover seems pretty cool.