Layout Jade - nodeJS - Menu aparece já aberto
Pessoal, estou usando o Jade para fazer um layout padrão, pois varias telas do meu site irão utilizar um mesmo layout (menu).
Peguei um layout gratuito: http://startbootstrap.com/template-categories/admin-dashboard/
E estou montando uma estrutura de "includes", separando por:
- dashboard - que vai juntar tudo (head, menus , corpo e scripts)
- head - cabecalho e css
- menus - menu padrao para as paginas
- corpo - que vai ser as paginas de acordo com o menu escolhido
- scripts - javascripts
Mas, quando exibe a pagina, exibe com os Menus ja expandidos (abertos), e nao sei como fazer para deixar os menus fechados.
Segue os arquivos:
-- dashboard.jade
doctype html
html(lang='en')
include head
body
include menu_
// /#page-wrapper
// /#wrapper
include scripts
-- head.jade
block head
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(name='description', content='')
meta(name='author', content='')
title Cuidamos
// Bootstrap Core CSS
link(href='../../stylesheets/bootstrap/bootstrap.min.css', rel='stylesheet')
// MetisMenu CSS
link(href='../../stylesheets/metisMenu/metisMenu.min.css', rel='stylesheet')
// Timeline CSS
link(href='../../stylesheets/dist/timeline.css', rel='stylesheet')
// Custom CSS
link(href='../../stylesheets/dist/sb-admin-2.css', rel='stylesheet')
// Morris Charts CSS
link(href='../../stylesheets/morrisjs/morris.css', rel='stylesheet')
// Custom Fonts
link(href='../../stylesheets/font-awesome/font-awesome.min.css', rel='stylesheet')
link(href='../../stylesheets/style.css', rel='stylesheet')
-- menu_.jade
block menu
nav.navbar.navbar-default.navbar-static-top(role='navigation', style='margin-bottom: 0')
// INICIO CONTEM HEADER + MENU
.navbar-header
// INICIO SB ADMIN 2
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='index.html') Dash
// FIM SB ADMIN 2
// /.navbar-header
ul.nav.navbar-top-links.navbar-right
// INICIO ICONES CANTO SUPERIOR DIREITO
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-envelope.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-messages
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a(href='#')
div
strong John Smith
span.pull-right.text-muted
em Yesterday
div
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...
li.divider
li
a.text-center(href='#')
strong Read All Messages
i.fa.fa-angle-right
// /.dropdown-messages
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-tasks.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-tasks
li
a(href='#')
div
p
strong Task 1
span.pull-right.text-muted 40% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-success(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%')
span.sr-only 40% Complete (success)
li.divider
li
a(href='#')
div
p
strong Task 2
span.pull-right.text-muted 20% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-info(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%')
span.sr-only 20% Complete
li.divider
li
a(href='#')
div
p
strong Task 3
span.pull-right.text-muted 60% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-warning(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%')
span.sr-only 60% Complete (warning)
li.divider
li
a(href='#')
div
p
strong Task 4
span.pull-right.text-muted 80% Complete
.progress.progress-striped.active
.progress-bar.progress-bar-danger(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%')
span.sr-only 80% Complete (danger)
li.divider
li
a.text-center(href='#')
strong See All Tasks
i.fa.fa-angle-right
// /.dropdown-tasks
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-bell.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-alerts
li
a(href='#')
div
i.fa.fa-comment.fa-fw
| New Comment
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-twitter.fa-fw
| 3 New Followers
span.pull-right.text-muted.small 12 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-envelope.fa-fw
| Message Sent
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-tasks.fa-fw
| New Task
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a(href='#')
div
i.fa.fa-upload.fa-fw
| Server Rebooted
span.pull-right.text-muted.small 4 minutes ago
li.divider
li
a.text-center(href='#')
strong See All Alerts
i.fa.fa-angle-right
// /.dropdown-alerts
// /.dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown', href='#')
i.fa.fa-user.fa-fw
i.fa.fa-caret-down
ul.dropdown-menu.dropdown-user
li
a(href='cadastroPacientes.html')
i.fa.fa-user.fa-fw
| Meu Cadastro
li
a(href='#')
i.fa.fa-gear.fa-fw
| Settings
li.divider
li
a(href='login.html')
i.fa.fa-sign-out.fa-fw
| Logout
// /.dropdown-user
// /.dropdown
// FIM ICONES CANTO SUPERIOR DIREITO
// /.navbar-top-links
.navbar-default.sidebar(role='navigation')
// INICIO DO MENU
.sidebar-nav.navbar-collapse
ul#side-menu.nav
li.sidebar-search
.input-group.custom-search-form
input.form-control(type='text', placeholder='Search...')
span.input-group-btn
button.btn.btn-default(type='button')
i.fa.fa-search
// /input-group
li
a(href='index.html')
i.fa.fa-dashboard.fa-fw
| Dashboard
li
a(href='#')
i.fa.fa-bar-chart-o.fa-fw
| Charts
span.fa.arrow
ul.nav.nav-second-level
li
a(href='#') Flot Charts
li
a(href='#') Morris.js Charts
// /.nav-second-level
li
a(href='tables.html')
i.fa.fa-table.fa-fw
| Tables
li
a(href='forms.html')
i.fa.fa-edit.fa-fw
| Forms
li
a(href='#')
i.fa.fa-wrench.fa-fw
| UI Elements
span.fa.arrow
ul.nav.nav-second-level
li
a(href='panels-wells.html') Panels and Wells
li
a(href='buttons.html') Buttons
li
a(href='notifications.html') Notifications
li
a(href='typography.html') Typography
li
a(href='icons.html') Icons
li
a(href='grid.html') Grid
// /.nav-second-level
li
a(href='#')
i.fa.fa-sitemap.fa-fw
| Multi-Level Dropdown
span.fa.arrow
ul.nav.nav-second-level
li
a(href='#') Second Level Item
li
a(href='#') Second Level Item
li
a(href='#')
| Third Level
span.fa.arrow
ul.nav.nav-third-level
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
li
a(href='#') Third Level Item
// /.nav-third-level
// /.nav-second-level
li
a(href='#')
i.fa.fa-files-o.fa-fw
| Sample Pages
span.fa.arrow
ul.nav.nav-second-level
li
a(href='blank.html') Blank Page
li
a(href='login.html') Login Page
// /.nav-second-level
// /.sidebar-collapse
// FIM DO MENU
// /.navbar-static-side
// FIM CONTEM HEADER + MENU
include corpo
-- corpo.jade
#page-wrapper
// INICIO CONTEM CORPO DA PAGINA
.col-lg-12
h1.page-header Cadastro
header.row
.row
.form-group.col-md-8(role='main')
form(role='form')
.row
.form-group
.jumbotron
.containerh1 Bem Vindo !
p
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cpfPaciente.form-control.input-xs(name='cpfPaciente', placeholder='cpf (999.999.999-99)', required='', tabindex='1', type='text', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#dataNascimentoPaciente.form-control.input-xs(name='dataNascimentoPaciente', required='', type='text', placeholder='Data Nascimento (99/99/9999)', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
select.form-control.input-xsoption
option(value='', selected='') Sexo
option(value='F') Feminino
option(value='M') Masculino
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#first_name.form-control.input-xs(type='text', name='first_name', placeholder='Nome')
.col-xs-6.col-sm-6.col-md-6
.form-group
input#last_name.form-control.input-xs(type='text', name='last_name', placeholder='Sobrenome')
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#email.form-control.input-xs(type='email', name='email', placeholder='Email')
.col-xs-6.col-sm-6.col-md-6
.form-group
input#confirmeEmail.form-control.input-xs(type='email', name='confirmeEmail', placeholder='Confirme Email')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#senha.form-control.input-xs(type='password', name='senha', placeholder='Senha')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#confirmeSenha.form-control.input-xs(type='password', name='confirmeSenha', placeholder='Confirme Senha')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Endereço:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cepPaciente.form-control.input-xs(name='cepPaciente', required='', type='text', placeholder='Cep (99999-999)', value='')
.row
.col-xs-6.col-sm-6.col-md-6
.form-group
input#ruaPaciente.form-control.input-xs(name='ruaPaciente', required='', type='text', placeholder='Rua', value='')
.col-xs-2.col-sm-2.col-md-2
.form-group
input#numeroRuaPaciente.form-control.input-xs(name='numeroRuaPaciente', required='', type='text', placeholder='Numero', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#complementoRuaPaciente.form-control.input-xs(name='complementoRuaPaciente', required='', type='text', placeholder='Complemento', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
select#estado.form-control.m-bot15(name='estado')option(value='') Selecione Estado
option(value='1') AC-ACRE
option(value='2') AL-ALAGOAS
option(value='3') AP-AMAPÁ
option(value='4') AM-AMAZONAS
option(value='5') BA-BAHIA
option(value='6') CE-CEARÁ
option(value='7') DF-DISTRITO FEDERAL
option(value='8') ES-ESPÍRITO SANTO
option(value='9') RR-RORAIMA
option(value='10') GO-GOIÁS
option(value='11') MA-MARANHÃO
option(value='12') MT-MATO GROSSO
option(value='13') MS-MATO GROSSO DO SUL
option(value='14') MG-MINAS GERAIS
option(value='15') PA-PARÁ
option(value='16') PB-PARAÍBA
option(value='17') PR-PARANÁ
option(value='18') PE-PERNAMBUCO
option(value='19') PI-PIAUÍ
option(value='20') RJ-RIO DE JANEIRO
option(value='21') RN-RIO GRANDE DO NORTE
option(value='22') RS-RIO GRANDE DO SUL
option(value='23') RO-RONDÔNIA
option(value='24') TO-TOCANTINS
option(value='25') SC-SANTA CATARINA
option(value='26') SP-SÃO PAULO
option(value='27') SE-SERGIPE
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cidade.form-control.input-xs(name='cidade', required='', type='text', placeholder='Cidade', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#bairro.form-control.input-xs(name='bairro', required='', type='text', placeholder='Bairro', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#telefoneFixoPaciente.form-control.input-xs(name='telefoneFixoPaciente', required='', type='text', placeholder='Telefone (99-9999-9999)', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#celularPaciente.form-control.input-xs(name='celularPaciente', required='', type='text', placeholder='Celular (99-99999-9999)', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Se possuir Convênio Médico:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
select#convenio.form-control.m-bot15(name='convenio')option(value='') Selecione Convenio Medico
option(value='1') AC-ACRE
.col-xs-4.col-sm-4.col-md-4
.form-group
input#planoConvenioMedico.form-control.input-xs(name='planoConvenioMedico', required='', type='text', placeholder='Plano Convenio Medico', value='')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#numeroCarteirinhaConvenio.form-control.input-xs(name='numeroCarteirinhaConvenio', required='', type='text', placeholder='Numero Completo Carteirinha', value='')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
label Se Menor de Idade, Informar um Responsável:
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
input#nomeResponsavel.form-control(type='text', name='nomeResponsavel', value='Nome do Responsavel')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#cpfResponsavel.form-control(type='text', name='cpfResponsavel', value='CPF do Responsavel')
.col-xs-4.col-sm-4.col-md-4
.form-group
input#telefoneResponsavel.form-control(name='telefoneResponsavel', type='text', value='Tel Responsavel')
.row
.col-xs-4.col-sm-4.col-md-4
.form-group
.col-xs-4.col-sm-4.col-md-4
.form-group(style='text-align:center')
input.btn.btn-success.btn-lg(type='submit', value='Cadastrar')
aside.col-md-4(role='complementary')
footer.row
// FIM CONTEM CORPO DA PAGINA
Se alguem conseguir me dar uma luz para resolver isso...
Discussão (0)
Carregando comentários...