Struggling with integrating Onsen UI's ons-sliding-menu and ons-tabbar together

Encountering issues while trying to combine Onsen UI ons-sliding-menu and ons-tabbar. The goal is to have the sliding menu positioned at the top and an icon bar at the bottom. Various attempts have been made:

<body>  
  <ons-screen>

    <ons-sliding-menu 
      behind-page="menu.html" 
      above-page="navigator1.html">
    </ons-sliding-menu>

<ons-tabbar>
      <ons-tabbar-item
              active="true"
              label="Home"
              icon="home"
              page="navigator1.html"></ons-tabbar-item>

      <ons-tabbar-item
          label="Camera"
              icon="camera"
              page="page2.html"></ons-tabbar-item>

      <ons-tabbar-item
          label="Settings"
              icon="gear"
              page="page3.html"></ons-tabbar-item>
    </ons-tabbar>

  </ons-screen>

The slider menu ceases to function once the tabbar is added.

Is there a more intricate example available?

cssangularjscordovatopcoatonsen-ui

Answer №1

It's recommended to organize them into separate files for easier management.

In this example, I have placed the tabbar inside the sliding menu on top of the page. However, you can also nest the sliding menu within the tabbar based on your design preferences.

Main Index File: index.html

<body>
  <ons-screen page="sliding_menu.html"></ons-screen>
</body>

Sliding Menu File: sliding_menu.html

<ons-sliding-menu
  behind-page="menu.html" 
  above-page="tabbar.html">
</ons-sliding-menu>

Tabbar File: tabbar.html

<ons-tabbar>
  <ons-tabbar-item
      active="true"
      label="Home"
      icon="home"
      page="navigator1.html"></ons-tabbar-item>

  <ons-tabbar-item
      label="Camera"
      icon="camera"
      page="page2.html"></ons-tabbar-item>

  <ons-tabbar-item
      label="Settings"
      icon="gear"
      page="page3.html"></ons-tabbar-item>
</ons-tabbar>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The sidebar's bottom gets concealed beneath the page's window

I seem to be facing an issue with the sidebar where the bottom section is not visible. Interestingly, when I remove the top navbar, everything works fine. Despite my efforts to troubleshoot and apply various solutions, none of them seem to work for me. Do ...

htmlcssgridoverflowbootstrap-5

Ways to divide and extract information stored within an array

I need help printing out this array of data. Here is how my data is structured: [[["Not Critical","Not Critical"]],[["Not Critical","Not Critical"]],[["Not Critical","Not Critical"]]] This is how I want the data to be displayed (each innermost value on ...

javascriptjqueryarraysangularjsunderscore.js

What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling ...

javascriptcssreactjsflexboxmaterial-ui

Adding a blank data-columns attribute using jQuery:

I am trying to add the data-columns attribute for salvattore.js, but I am facing an issue where I cannot simply add the attribute without providing a value. Currently, my code looks like this: $('#liste-vdl div.view-content').attr("data-columns" ...

javascriptjqueryhtmlcssattributes

The most basic security measure for safeguarding a webpage

Currently, I am developing a website that requires customers to input a specific "code" in order to gain access. Upon visiting the site, users will be prompted to enter a simple code to proceed further. My programming skills are limited to HTML, CSS, and J ...

javascripthtmlcss

What is the best way to ensure that less2css compiles all files after saving just one less file?

In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...

csscompilationlesssublimetext2

"Discover the simplicity of customizing Bootstrap 5 with an easy-to-use online tool

When I was using Bootstrap 3, there was a convenient tool that allowed me to customize which features I wanted in the minified CSS/JS files to improve loading time. Now, as I delve into the documentation for Bootstrap 5, I find myself struggling to unders ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...

csstwitter-bootstrapgruntjsless

Unable to align Flexbox item to flex-end position

Can someone help me troubleshoot this codepen with the .inner-wrp div (dark red) fitting under the lightblue .top-right div? Check it out here! .purple { background: purple; } .green { background: green; } .lightblue { background: lightblue; } ...

htmlcssflexbox

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Struggling to remove a persistent 5px whitespace on my website eternalminerals.com See the issue highlighted in this screenshot: Trying to eliminate the whitespace by adjusting margins in Google Chrome, but unable to apply styles to Avada shortcodes: &l ...

htmlcsslayoutwordpress

In Firefox, the image width may vary compared to the one that was originally inserted

Greetings to all! I have encountered an issue while using jcrop with Firefox as my browser. It seems that the image size does not match the actual dimensions, allow me to elaborate. The image appears to be 20% larger than its displayed size, despite being ...

htmlcssfirefox

Problem encountered with submenu text in CSS drop-down menu

Hey there! I've recently started working on a website and encountered a problem while trying to create a dropdown menu using CSS and HTML. The hover function for the submenu is functioning properly, but I'm struggling with changing the font color ...

htmlcss

How to maximize ng-model usage within an ng-repeat loop

I am attempting to achieve the selection of multiple values from a checkbox list which is generated using ng-repeat in Angular. <div ng-repeat="item in items"> <input type="checkbox" ng-model="model.ID" ng-true-value="'{{item.ID}}'" ng ...

angularjsangularjs-ng-repeatangularjs-ng-model

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...

javascriptjquerycss

Creating a persistent div with fixed positioning, vertical overflow, and spanning the entire width using Bootstrap 4

I'm looking for a way to create two columns with two tables using Bootstrap 4.1. I want the right table to be fixed with auto overflow, but when I try to do this, the table does not span the full width of the column. Are there any bootstrap solutions ...

twitter-bootstrapcssbootstrap-4

When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

I have two files, one HTML and one CSS. The HTML file contains the following code: <div class="app"> <div class="header"></div> <div class="main"> <div class="container_1"> ...

htmlcss

The animation of the submenu on hover in jQuery does not provide a seamless experience

I have created a navigation bar with submenus. Initially, all the bars load with hidden submenus. Upon hovering over a link, the submenu animates in. You can check out my code on jsfiddle: http://jsfiddle.net/6cAaN/ The functionality is mostly working fin ...

jquerycssnavigationhover

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

AngularJS view fails to reflect updates in the model

This issue with Angular has been widely discussed online, but I ask for your patience. I have tried various solutions without success. Here is a simplified version of my code: View: <div ng-hide="{{beHidden}}"></div> Controller: // Set beHi ...

javascriptangularjsionic-framework

Can you tell me where the templates store their icons?

Hey there, thank you for taking the time to read my question. I have a template that can be found at this link: In the top left corner of the template, there is an icon of a home. I have copied the entire website, including images, css, and js files, but ...

htmlcss