Onsen UI - Verwenden des Slide-Menüs nur für bestimmte Seiten
Ich erstelle eine App, bei der ich die ersten 3 Seiten (Anmelden, Registrieren und Passwort wiederherstellen) ohne Symbolleiste und Schiebemenü habe. In meiner App (geloggte Seiten) möchte ich das Folienmenü bereitstellen, aber ich erreiche dieses Ziel nicht. Wie kann ich es tun
Hier meine App:
index.html
<!DOCTYPE HTML>
<html lang="pt-br"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="components/loader.js"></script>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default)
</script>
</head>
<body>
<ons-navigator var="appNowa">
<ons-sliding-menu
var="app.slidingMenu"
menu-page="menu.html"
main-page="login.html"
side="right"
type="overlay"
max-slide-distance="200px"
swipable="false">
</ons-sliding-menu>
</ons-navigator>
<ons-template id="login.html">
<ons-page id="pageInicial">
<div id="formLogin">
<div class="subFormLogin">
<img id="logoInicial" src="images/logo-nowa-branco.png" />
<p class="login-chamada">Solicite exames clínicos diretamente pelo seu celular.</p>
<p><input maxlenght="5" type="text" id="login-email" name="login-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>
<p><input type="password" id="login-senha" name="login-senha" class="text-input" placeholder="Senha" style="display:block;width:100%;text-align:center"></p>
</div>
<ons-button id="login-entrar" modifier="large">Entrar</ons-button>
<div style="width=100%;text-align:center;font-size:14px;margin-top:20px;">
<a href="#" onclick="appNowa.pushPage('senha.html')" style="margin-right:15px">Esqueci minha senha</a> |
<a href="#" onclick="appNowa.pushPage('registro.html')" style="margin-left:15px">Registrar-se</a>
</div>
</div>
<ons-modal var="loginModal">
<ons-icon icon="ion-alert"></ons-icon>
<p id="login-msg"></p>
</ons-modal>
</ons-page>
</ons-template>
<ons-template id="senha.html">
<ons-page id="pageSenha">
<div id="formSenha">
<div class="subFormSenha">
<img id="logoInicial" src="images/logo-nowa-branco.png" />
<p class="login-chamada">Informe seu e-mail para recuperar sua senha.,</p>
<p><input type="email" id="usuario-email" name="login-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>
</div>
<ons-button id="senha-enviar" modifier="large">Enviar</ons-button>
<p></p>
<ons-button id="senha-cancelar" modifier="large" onclick="appNowa.popPage()">Cancelar</ons-button>
</div>
<ons-modal var="senhaModal">
<ons-icon icon="ion-alert"></ons-icon>
<p id="senha-msg"></p>
</ons-modal>
</ons-page>
</ons-template>
<ons-template id="registro.html">
<ons-page id="pageRegistro">
<div id="formRegistro">
<div class="subFormLogin">
<img id="logoInicial" src="images/logo-nowa-branco.png" />
<p class="login-chamada">Solicite exames clínicos diretamente pelo seu celular.</p>
<p><input type="text-input" id="registro-nome" name="registro-nome" class="text-input" placeholder="Nome Completo" style="display:block;width:100%;text-align:center"></p>
<p><input type="email" id="registro-email" name="registro-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>
<p><input type="password" id="registro-senha" name="registro-senha" class="text-input" placeholder="Senha" style="display:block;width:100%;text-align:center"></p>
</div>
<ons-button id="registro-entrar" modifier="large">Registrar-se</ons-button>
<p></p>
<ons-button id="registro-entrar" modifier="large" onclick="appNowa.popPage();">Cancelar</ons-button>
<p class="registro-termos">
<a onclick="window.open('http://appnowa.com/termos-de-uso-e-politica-de-privacidade/', '_blank', 'location=yes');">
Termos de Uso e Política de Privacidade
</a>
</p>
</div>
<ons-modal var="registroModal">
<ons-icon icon="ion-alert"></ons-icon>
<p id="registro-msg"></p>
</ons-modal>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-page id="pageMenuContexto" style="background-color:#6989CD">
<ons-list>
<ons-list-item
modifier="tappable"
class="list-item-perfil"
onclick="app.slidingMenu.setAbovePage('perfil.html', {closeMenu: true})"
style="padding-top: 20px">
<ons-row>
<ons-col>
<ons-row align="center">
<ons-col><div class="circle circle-perfil"></div></ons-col>
</ons-row>
<ons-row align="center">
<ons-col><div>Dalai Lama</div></ons-col>
</ons-row>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('dashboard.html', {closeMenu: true})">
<i class="fa fa-home fa-lg" style="color: #FFF"></i>
<span> Menu Principal</span>
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('exames-marcados.html', {closeMenu: true})">
<i class="fa fa-table fa-lg" style="color: #FFF"></i>
Exames Marcados
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('configuracoes.html', {closeMenu: true})">
<i class="fa fa-gear fa-lg" style="color: #FFF"></i>
Configurações
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('tutorial.html', {closeMenu: true})">
<i class="fa fa-question-circle fa-lg" style="color: #FFF"></i>
Como Usar
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('contato.html', {closeMenu: true})">
<i class="fa fa-envelope fa-lg" style="color: #FFF"></i>
Fale Conosco
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('sobre.html', {closeMenu: true})">
<i class="fa fa-exclamation-circle fa-lg" style="color: #FFF"></i>
Sobre
</ons-list-item>
<ons-list-item
modifier="tappable" class="list__item__line-height"
onclick="app.slidingMenu.setMainPage('sair.html', {closeMenu: true})">
<i class="fa fa-power-off fa-lg" style="color: #FFF"></i>
Sair
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page id="pageMenuInicial">
<ons-toolbar id="cabecalho">
<div class="right">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
</ons-toolbar>
<div id="menu-inicial">
<ons-row align="center">
<ons-col>
<div class="menu-item-area" onclick="app.slidingMenu.setMainPage('perfil.html')">
<div class="circle perfil-icone"></div>
<div class="menu-item">Perfil</div>
</div>
</ons-col>
<ons-col>
<div onclick="app.slidingMenu.setMainPage('exames.html')">
<div class="circle exame-icone"></div>
<div class="menu-item">Exames</div>
</div>
</ons-col>
<ons-col>
<div onclick="app.slidingMenu.setMainPage('alertas.html')">
<div class="circle alerta-icone"></div>
<div class="menu-item">Alertas</div>
</div>
</ons-col>
</ons-row>
<p class="menu-inicial-separador"></p>
<ons-row align="center">
<ons-col>
<div onclick="app.slidingMenu.setMainPage('favoritos.html')">
<div class="circle favorito-icone"></div>
<div class="menu-item">Favoritos</div>
</div>
</ons-col>
<ons-col>
<div onclick="app.slidingMenu.setMainPage('labs.html')">
<div class="circle lab-icone"></div>
<div class="menu-item">Labs</div>
</div>
</ons-col>
<ons-col>
<div onclick="app.slidingMenu.setMainPage('rotas.html')">
<div class="circle rota-icone"></div>
<div class="menu-item">Rotas</div>
</div>
</ons-col>
</ons-row>
</div>
</ons-page>
</ons-template>
<ons-template id="perfil.html">
<ons-page id="pagePerfil">
<ons-toolbar id="cabecalho">
<div class="left">
<!--<ons-toolbar-button ng-click="appNowa.popPage()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>-->
</div>
<div class="right">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
</ons-toolbar>
<ons-list style="background:none">
<ons-list-header class="perfil-list-header">Titular da Conta</ons-list-header>
<ons-list-item
modifier="tappable"
onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
style="background:#6989CD">
<div class="circle-perfil-lista"></div>
<span id="perfil-titular-nome">Dalai Lama</span>
</ons-list-item>
<ons-list-header class="perfil-list-header">Dependentes</ons-list-header>
<ons-list-item
modifier="tappable"
onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
style="background:#6989CD">
<div class="circle-dependente-lista"></div>
<span id="perfil-titular-nome">Mahatma Gandhi</span>
</ons-list-item>
<ons-list-item
modifier="tappable"
onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
style="background:#6989CD">
<div class="circle-semfoto-lista"></div>
<span id="perfil-titular-nome">Adicionar Dependente</span>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="perfil-detalhe.html">
<ons-page id="pagePerfilDetalhe">
<ons-toolbar id="cabecalho">
<div class="left">
<!--<ons-toolbar-button ng-click="appNowa.popPage()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>-->
</div>
<div class="right">
<ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
</ons-toolbar>
<ons-row>
<ons-col>
<ons-row style="padding-top:15px">
<ons-col align="center"><div class="circle circle-perfil"></div></ons-col>
</ons-row>
<ons-row style="padding-top:10px">
<ons-col align="center" style="font-weight:bold;">Bill Gates</ons-col>
</ons-row>
<ons-row style="padding:15px 0px 5px 0px;">
<ons-col align="center">
<ons-button id="registro-entrar">Solicitar Exame</ons-button>
</ons-col>
</ons-row>
</ons-col>
</ons-row>
<div id="form-perfil-detalhe">
<p><input maxlength="40" type="text-input" id="usuario-nome" class="text-input" placeholder="Nome Completo" style="display:block;width:100%;text-align:left"></p>
<p><input maxlength="40" type="email" id="usuario-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:left"></p>
<p>
<select id="usuario-sexo" class="text-input" style="width:100%">
<option value="">Sexo</option>
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</p>
<p><input type="text-input" id="usuario-nasc" class="text-input" placeholder="Data de Nascimento" style="width:100%"></p>
<p><input type="text-input" id="usuario-rg" class="text-input" placeholder="RG" style="width:100%"></p>
<p><input type="text-input" id="usuario-cpf" class="text-input" placeholder="CPF" style="width:100%"></p>
<p><input type="tel" id="usuario-cel" class="text-input" placeholder="Telefone Celular" style="width:100%"></p>
<p>
<select id="usuario-convenio" class="text-input" style="width:100%">
<option value="0">Convênio</option>
<option value="-1">Não tenho convênio</option>
<option value="1">UNIMED</option>
</select>
</p>
<p>
<select id="usuario-plano" class="text-input" style="width:100%">
<option value="0">Plano</option>
<option value="1">UNIMED Básico</option>
</select>
</p>
<p><input type="text-input" id="usuario-carteira" class="text-input" placeholder="Número da carteirinha (convênio)" style="width:100%"></p>
<p><input type="text-input" id="usuario-cep" class="text-input" placeholder="CEP" style="width:100%"></p>
<ons-row>
<ons-col width="70%">
<input maxlength="40" type="text-input" id="usuario-endereco" class="text-input" placeholder="Endereço">
</ons-col>
<ons-col width="30%">
<input type="number" id="usuario-endereco-numero" class="text-input" placeholder="Nº">
</ons-col>
</ons-row>
<p><input maxlength="20" type="text-input" id="usuario-complemento" class="text-input" placeholder="Complemento" style="width:100%"></p>
<p><input maxlength="20" type="text-input" id="usuario-bairro" class="text-input" placeholder="Bairro" style="width:100%"></p>
<p><input maxlength="20" type="text-input" id="usuario-cidade" class="text-input" placeholder="Cidade" style="width:100%"></p>
<p>
<select id="usuario-uf" class="text-input" style="width:100%">
<option value="0">Estado</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
<option value="AM">AM</option>
<option value="BA">BA</option>
<option value="CE">CE</option>
<option value="DF">DF</option>
<option value="ES">ES</option>
<option value="GO">GO</option>
<option value="MA">MA</option>
<option value="MT">MT</option>
<option value="MS">MS</option>
<option value="MG">MG</option>
<option value="PA">PA</option>
<option value="PB">PB</option>
<option value="PR">PR</option>
<option value="PE">PE</option>
<option value="PI">PI</option>
<option value="RJ">RJ</option>
<option value="RN">RN</option>
<option value="RS">RS</option>
<option value="RO">RO</option>
<option value="RR">RR</option>
<option value="SC">SC</option>
<option value="SP">SP</option>
<option value="SE">SE</option>
<option value="TO">TO</option>
</select>
</p>
<ons-button id="usuario-salvar" modifier="large">Salvar</ons-button>
</div>
<ons-modal var="perfilDetalheModal">
<ons-icon icon="ion-alert"></ons-icon>
<p id="perfil-msg"></p>
</ons-modal>
<ons-modal var="perfilDetalheSucessoModal">
<ons-icon icon="ion-checkmark"></ons-icon>
<p id="perfil-sucesso-msg"></p>
</ons-modal>
</ons-page>
</ons-template>
<script src="js/jquery.mask.min.js"></script>
<script src="js/date.js"></script>
<script src="js/jquery.ba-outside-events.min.js"></script>
<script src="js/jquery.plugin.min.js" type="text/javascript"></script>
<script src="js/jquery.maxlength.min.js" type="text/javascript"></script>
<script src="js/ap.js"></script>
</body>
</html>
dashboard.html
<ons-navigator var="slideNav" page="main.html"></ons-navigator>
EDIT - AKTUALISIERT: Ich habe die Lösung von @Vu gemacht. Es funktioniert, aber ich stehe vor dem Problem:
Normaler Bildschirm:
Slide-Menü in LG Optimus G (Android 4.1.2 Version) geöffnet
Slide-Menü in Moto E (Android 4.4.4 Version) geöffnet - die Hauptseite verschwindet