Why does Onsen slide menu not open?

Question

I have a mobile application that I am developing in phonegap with Onsen and I have a page where I have the component <ons-sliding-menu> but when I click the button to open this menu does not open nothing happens I do not know what can be I have already turned and turned and could not find the error. From what I’ve had to figure out the problem I figured out but I can’t solve the problem is with the ons-navigator that I have in the page if I remove it the menu already opens well if with it does not open, I leave now the whole code that I have to understand better.

Code

<ons-navigator  var="login.navegacao" page="login.html"></ons-navigator>
    <ons-template id="login.html">
        <ons-page>
            <ons-toolbar fixed-style style="background-color: #589397;">
                <div style="color: #ffffff; font-weight: 700;" class="center">Login</div>
            </ons-toolbar>
            <form id="login_form" name="login_form" method="post" enctype="multipart/form-data" >
            <input type="hidden" name="valida_login" id="valida_login" value="ok_login">
                <div class="login-form">
                    <img width="100%" src="img/logo.png" alt=""/>
                    <button id="facebook_login" class="button button--large"><ons-icon icon="facebook" size="20px" fixed-width="true"></ons-icon>Facebook</button><br>
                    <button style="background-color: #ca5b60;" class="button button--large"><ons-icon icon="google" style="margin-left: -20px;" size="20px" fixed-width="true"></ons-icon>Google</button>
                    <input type="email" class="text-input--underbar" id="email_login" name="email_login" placeholder="Email" value="">
                    <input type="password" class="text-input--underbar" id="password_login" name="password_login" placeholder="Password" value="">
                    <br><br>
                    <button id="btn_login" style="background-color: #589397;" name="btn_login" class="button button--large">Entrar</button><br>
                    <button onclick="login.navegacao.pushPage('registo.html', { animation : 'slide' } )" style="background-color: #589397;" class="button button--large">Registar</button>
                    <br>
                    <ons-button onclick="login.navegacao.pushPage('recuperar_pass.html', { animation : 'slide' } )" modifier="quiet" class="forgot-password">Esqueceu-se da password?</ons-button>
                </div>
            </form>
        </ons-page>
    </ons-template>
<ons-template id="registo.html">
<link rel="stylesheet" href="css/registo.css">
    <ons-page>
        <ons-toolbar fixed-style style="background-color: #589397;">
            <div class="left"><ons-back-button>Voltar</ons-back-button></div>
            <div style="color: #ffffff; font-weight: 700;" class="center">Registo</div>
        </ons-toolbar>
        <form id="registo_form" name="registo_form" method="post" enctype="multipart/form-data" >
        <input type="hidden" name="valida_registo" id="valida_registo" value="ok_registo">
            <div class="formarea">

                <div class="form-row">
                    <div class="titulo_registo">Inscreve-te no SabeOnde para encontrar e guardar todas as coisas que te inspiram.</div>
                </div>

                <div class="form-row">
                    <input type="text" class="text-input--underbar width-full" id="nome" name="nome" placeholder="Nome">
                </div>

                <div class="form-row">
                    <input type="text" class="text-input--underbar width-full" id="email" name="email" placeholder="Email">
                </div>

                <div class="form-row">
                    <input type="password" class="text-input--underbar width-full" id="password" name="password" placeholder="Password">
                </div>

                <div class="form-row">
                    <input type="password" class="text-input--underbar width-full" id="repita_password" name="repita_password" placeholder="Repetir password">
                </div>

                <div class="vspc form-row">
                    <button id="btn_regista_user" style="background-color: #589397;" name="btn_regista_user" class="button button--large">Registar</button>
                </div>
            </div>
        </form>
    </ons-page>
</ons-template>
<ons-template id="recuperar_pass.html">
<link rel="stylesheet" href="css/registo.css">
    <ons-page>
        <ons-toolbar fixed-style style="background-color: #589397;">
            <div class="left"><ons-back-button>Voltar</ons-back-button></div>
            <div style="color: #ffffff; font-weight: 700;" class="center">Recuperação</div>
        </ons-toolbar>
        <form id="recuperar_pass_form" name="recuperar_pass_form" method="post" enctype="multipart/form-data" >
        <input type="hidden" name="valida_recuperar_pass" id="valida_recuperar_pass" value="ok_recuperar_pass">
            <div class="formarea">
                <div class="form-row">
                    <div class="titulo_registo">Insira o email com que se registou e iremos lhe enviar um email com as informações para repor a sua password </div>
                </div>

                <div class="form-row">
                    <input type="text" class="text-input--underbar width-full" id="email_recuperar" name="email_recuperar" placeholder="Email" value="">
                </div>

                <div class="vspc form-row">
                    <button id="btn_recuperar_pass" style="background-color: #589397;" name="btn_recuperar_pass" class="button button--large">Repor password</button>
                </div>
            </div>
        </form>
    </ons-page>
</ons-template>
<ons-sliding-menu
        main-page="home.html"
        menu-page="menu.html"
        side="left"
        max-slide-distance="250px"
        var="menu">
</ons-sliding-menu>
<ons-template id="home.html">
    <ons-page>
        <ons-toolbar style="background-color: #589397;">
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
            </div>
            <div class="right">
                <ons-toolbar-button id="botao_geolocation"><ons-icon icon="ion-location" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
                <ons-toolbar-button id="botao_pesquisa"><ons-icon icon="ion-search" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
            </div>
        </ons-toolbar>
        <ons-page>
            <ons-toolbar fixed-style>
                <div class="center">Encontre o que procura em SabeOnde</div>
            </ons-toolbar>
            <script src="js/categorias.js"></script>
            <script src="js/modal.js"></script>
            <ons-modal var="modal">
                <ons-icon style="position: absolute; top: 0; left: 0; margin:10px 10px 10px 10px;" id="close" icon="ion-close-round"></ons-icon>
            </ons-modal>
            <div class="banner_home"></div>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-cutlery"></ons-icon> Comer</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_comer"></div>
            </ons-carousel>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="ion-home"></ons-icon> Dormir</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_dormir"></div>
            </ons-carousel>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-shopping-cart"></ons-icon> Comprar</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_comprar"></div>
            </ons-carousel>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-wrench"></ons-icon> Serviços</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_servicos"></div>
            </ons-carousel>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-glass"></ons-icon> Bares</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_bares"></div>
            </ons-carousel>
            <ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-university"></ons-icon> Lazer</ons-list-header>
            <ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
                <div id="mostra_categorias_lazer"></div>
            </ons-carousel>
        </ons-page>
    </ons-page>
</ons-template>
<ons-template id="page2.html">
    <ons-page>
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
    </ons-page>
</ons-template>
<ons-template id="menu.html">
    <div class="profile-card">
        <img src="images/profile-image-01.png" class="profile-image">
        <div class="profile-name">Dave Graham</div>
        <div class="profile-id">@davegraham</div>
        <div class="profile-desc">Freelance designer, software engineer and cyclist</div>
    </div>
    <ons-list>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('home.html', {closeMenu: true})">
            <ons-icon icon="ion-home" style="font-size: 26px; width: 1em;"></ons-icon> Home
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('notificacoes.html', {closeMenu: true})">
            <ons-icon icon="ion-android-notifications" style="font-size: 26px; width: 1em;"></ons-icon> Notificações
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('marcadores.html', {closeMenu: true})">
            <ons-icon icon="ion-android-bookmark" style="font-size: 26px; width: 1em;"></ons-icon> Marcadores
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('fotos.html', {closeMenu: true})">
            <ons-icon icon="ion-image" style="font-size: 26px; width: 1em;"></ons-icon> Fotos
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('visitado.html', {closeMenu: true})">
            <ons-icon icon="ion-ios-location" style="font-size: 26px; width: 1em;"></ons-icon> Visitado
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('amigos.html', {closeMenu: true})">
            <ons-icon icon="ion-ios-people" style="font-size: 26px; width: 1em;"></ons-icon> Encontrar amigos
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('definicoes.html', {closeMenu: true})">
            <ons-icon icon="ion-gear-b" style="font-size: 26px; width: 1em;"></ons-icon> Preferências
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('logout.html', {closeMenu: true})">
            <ons-icon icon="ion-power" style="font-size: 26px; width: 1em;"></ons-icon> Sair
        </ons-list-item>
    </ons-list>
</ons-template>