Not show side menu on some panels

Question

Is there a way to not to use a side menu on some of the panels, on Intel's App Framework 2.0 UI? I have a side menu defined through a <nav> tag, but I want to display it just on certain panels.

Answer 1

To have a different nav per panel, you can use the "nav" data attribute:

<nav id="nav1"> ... </nav>
<nav id="nav2"> ... </nav>

<div id="content">
    <div id="panel1" class="panel" data-nav="nav1"> ... </div>
    <div id="panel2" class="panel" data-nav="nav2"> ... </div>
</div>

It'll switch between the two navs as you switch between panels. Note that the first in the markup/DOM becomes the default unless you specify data-nav="none" which will "hide" the nav for that panel. The problem I ran into is if you're on a tablet or larger, the media queries will still fill the space where the nav is with a blue column.

You'll have to disable that part in javascript by using the $.ui.disableSideMenu(); function call (you can restore it with $.ui.enableSideMenu();).

You can also use the data attributes to affect which footer and header show on a per panel basis. Meanwhile you can leave those attributes out for panels that will use the defaults.

http://app-framework-software.intel.com/documentation.php#afui/afui_panels

Answer 2

You can use any of the option like, $.ui.disableSideMenu(); or $.ui.slideSideMenu=false; or data-nav="none" on the panels you don't want it to see the side panel.

Answer 3

use data-nav="none" on the panels you don't want it to appear.