Bootstrap移动导航栏菜单无效

时间:2016-04-27 16:45:18

标签: twitter-bootstrap

这是我的menu.php,它根据用户个人资料构建Bootstrap菜单。 当我在手机上试用时,菜单下拉列表不会出现(应该在移动菜单的右侧)。 我找不到问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="ISO-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="cache-control" content="no-cache,no-store,must-revalidate" />
    <meta http-equiv="expires" content="Sat, 26 Jul 1997 05:00:00 GMT" />
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/x-icon" href="../favicon.ico">

    <title>Gestão de Contratos</title>

<!-- CSS ================================================== -->
    <!-- Bootstrap Core CSS -->
    <link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../Plugins/Bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../Plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../CSS/navbar-fixed-top.css" rel="stylesheet">
    <link href="../CSS/docs.min.css" rel="stylesheet">

    <link href="../Plugins/msg.css" rel="stylesheet" type="text/css" >

    <style>
      .navbar-brand { float: left;  height: 50px;  padding: 5px 15px;  font-size: 18px;  line-height: 20px;  vertical-align: bottom; }

      .bs-docs-nav .navbar-brand, .bs-docs-nav .navbar-nav>li>a { font-weight: 500;  color: #525252; }

      .modal.modal-70wide .modal-dialog { width: 70%; }
      .modal-70wide .modal-body { overflow-y: auto; }
    </style>

  </head>

  <body class="bs-docs-home">

   <!-- Docs master nav -->
   <header class="navbar navbar-fixed-top bs-docs-nav" id="top" role="banner">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="page_principal.php">
          <img alt="Brand" width="auto" height="30" align="top" src="../Images/logovale.png">
        </a>
      </div>
      <nav id="bs-navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">

<li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administrador <span class="caret"></span></a>
             <ul class="dropdown-menu">
               <li role="navigation" class="dropdown-header" >Informações Gerais:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_fornecedor.php',0)">- Empresas e CNPJs</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_categoria.php',0)" >- Categorias</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_unidade.php',0)"   >- Unidades Operacionais</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_centros.php',0)"   >- Centros</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_municipio.php',0)" >- Municípios</a></li>
               <li role="navigation" class="dropdown-header" >Cadastro de usuários:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=0',0)">- Administradores</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=1',0)">- Gestores de Categorias</a></li>
             </ul>
           </li><li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestor Categoria<span class="caret"></span></a>
             <ul class="dropdown-menu">
               <li role="navigation" class="dropdown-header" >Informações Gerais:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_isscateg.php',1)"   >- ISS</a></li>
               <li role="navigation" class="dropdown-header" >Dados Básicos Contrato:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_funcao.php',1)"     >- Funções</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_equipamento.php',1)">- Equipamentos</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_epi.php',1)"        >- EPIs</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_exame.php',1)"      >- Exames</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_treina.php',1)"     >- Treinamentos</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_sindicato.php',1)"  >- Sindicatos</a></li>
               <li role="navigation" class="dropdown-header" >Gestão Contratos:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_contrato.php',1)"   >- Contratos e OCs</a></li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_sindxempr.php',1)"  >- Grupos de Preços</a></li>
               <li role="navigation" class="dropdown-header" >Cadastro de usuários:</li>
                 <li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=2',1)">x Usuários Gestão Geral</a></li>  <!--  GGI e GGE -->
               <li role="navigation" class="dropdown-header" >Relatórios:</li>
                 <li><a href="#" onclick="fazmenu('page_relmensal.php',1)"           >x Relatório Mensal</a></li>
                 <li><a href="#" onclick="fazmenu('page_relevolcusto.php',1)"        >x Evolução de Custos</a></li>
             </ul>
           </li><li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestão Contratante<span class="caret"></span></a>
             <ul class="dropdown-menu"><li role="navigation" class="dropdown-header">Gestão Geral:</li>  <!--  GGI -->
                      <li><a href="#">x Relatórios</a></li>
                      <li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=3',1)">x Cadastro de Gestores e Fiscais</a></li>
                      <li><a href="#">x Medição</a></li><li role="navigation" class="dropdown-header">Gestão:</li>  <!--  GI -->
                      <li><a href="#">x Postos (Mob/Desmob)</a></li>
                      <li><a href="#">x Emitir Notificação</a></li>
                      <li><a href="#">x Medição</a></li>      <li role="navigation" class="dropdown-header">Fiscalização:</li>  <!--  FI -->
                 <li><a href="#">x Medição</a></li>
                 <li><a href="#">x Histórico Medições</a></li>
                 <li><a href="#">x Posto Descoberto</a></li>
                 <li><a href="#">x Descontos</a></li>
             </ul>
           </li><li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestão Contratada<span class="caret"></span></a>
             <ul class="dropdown-menu"><li role="navigation" class="dropdown-header">Gestão Geral:</li>  <!--  GGE -->
                      <li><a href="#">x Relatórios</a></li>
                      <li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=4',1)">x Cadastro de Gestores e Fiscais</a></li>
                      <li><a href="#">x Medição</a></li>
                      <li><a href="page_cadastro_MDO.php">- Custos de Mão de Obra</a></li><li role="navigation" class="dropdown-header">Gestão:</li>  <!--  GE -->
                      <li><a href="#">x Postos (Mob/Desmob)</a></li>
                      <li><a href="#">x Notificações</a></li>
                      <li><a href="#">x Medição</a></li>      <li role="navigation" class="dropdown-header">Fiscalização:</li>  <!--  FE -->
                 <li><a href="#">x Medição</a></li>
                 <li><a href="#">x Histórico Medições</a></li>
                 <li><a href="#">x Posto Descoberto</a></li>
                 <li><a href="#">x Descontos</a></li>

             </ul>
           </li><li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Meu Cadastro<span class="caret"></span></a>
             <ul class="dropdown-menu">
                 <li><a href="#" onclick="fazmenu('page_meucadastro.php',0)"  >- Alterar meu Cadastro</a></li>
                 <li><a href="#" onclick="fazmenu('page_altera_senha.php',0)" >- Alterar minha Senha</a></li>
             </ul>
           </li><li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-eye-open"></i> Indique a Categoria<span class="caret"></span></a>
             <ul class="dropdown-menu"><li><a href="#" onclick="mudacat(5)">CFTV Operações e Peças Aternativas para Segurança</a></li><li><a href="#" onclick="mudacat(2)">Portaria e Serviços</a></li><li><a href="#" onclick="mudacat(3)">Segurança Eletrônica</a></li><li><a href="#" onclick="mudacat(1)">Vigilância</a></li>  </ul>
           </li>
        </ul>  <!-- FIM MENU nav navbar-nav  -->

        <!--  BOTÃO DE SAIR  -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="script_logout.php"><i class="glyphicon glyphicon-off"></i> Sair</a></li>
        </ul>

      </nav>
    </div>  <!--  container  -->
   </header>

   <!-- form para executar script de página do menu  -->
   <div id="idchama" style="display:none">
     <FORM id="fchama" NAME="fchama" ACTION="xxx.php" target="_self" METHOD="POST">
        <input type="text"   id="idCateg" name="idCateg" value="" >
        <input type="submit" id="btchama">
     </FORM>
   </div>


    <!-- SCRIPTS Placed at the end of the document so the pages load faster
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="../JS/jquery-1.11.3.min.js"></script>
    <script src="../Bootstrap/js/bootstrap.min.js"></script>
    <script src="../Plugins/Bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../JS/bootstrap-table-mobile.js"></script>
    <script src="../JS/bootstrap-table-export.js"></script>
    <script src="../JS/tableExport.js"></script>
    <script src="../JS/bootstrap-table-resizable.js"></script>
    <script src="../JS/colResizable-1.5.source.js"></script>

    <script src="../JS/Funcoes.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../JS/ie10-viewport-bug-workaround.js"></script>

    <!-- dhtmlxGrid -->
    <link   rel="stylesheet"      href="../JS/dhtmlxGrid/codebase/dhtmlxgrid.css" type="text/css" />
    <script language="javascript"  src="../JS/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
    <script language="javascript"  src="../JS/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
    <script language="javascript"  src="../JS/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
    <style type="text/css">
      .csslingradeimpar{ background-color:#E6E6FA; }
      .csslingradepar  { background-color:#F0F8FF; }
      .csslinhover     { background-color:#FFCCCC; }
    </style>

   <script src="../Plugins/msg.js"></script>


<script>  <!--  funções genéricas para todos  -->

document.getElementById('idCateg').value= '0';
function mudacat(c)
{
  window.document.fchama.target= "_self";               // para abrir pagina na mesma tab
  window.document.fchama.action= 'page_principal.php';  // script a carregar
  document.getElementById('idCateg').value= c;          // passa por post a categoria nova
  window.document.fchama.btchama.click();               // carrega page_principal.php reabre menu puro
}

$(".modal-70wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});


// ==============================
   function fazmenu(script,op)
// ==============================
{
  if( (op == 1) && (document.getElementById('idCateg').value == '0') )
   {
     da_mensagem('Indique uma Categoria','a');
     xTimeout= setTimeout(deuTimeout,1500);
     return false;
   }
  window.document.fchama.target= "_self";
  window.document.fchama.action= script;
 // document.getElementById('idCateg').value= categ;
  window.document.fchama.btchama.click();
}


var posretorno;       // posição inicial do proximo "registro" a ser extraido da string retornada
var arraycampos = new Array();     // campos referentes a um "registro" extraido da string retornada


</script>

<!-- esta terminação tem que ser feita em cada tela que inclui o script_menu.php
  </body>
</html>
 -->

  <div class="container">

  <div id="mensagem" class="ui-widget-content"> </div>
  <div id="desabilita_msg" style="visibility:hidden" ></div>

  </div> <!-- container vazio menu inicial -->

  <script>  //  JAVASCRIPT DO MÓDULO DE UNIDADES
  var xTimeout;
  function deuTimeout()
  {
    clearTimeout(xTimeout);
    document.getElementById("desabilita_msg").style.visibility="hidden";
    document.getElementById("mensagem").style.visibility="hidden";
  }

 </body> <!-- aberto no script_menu.php -->
</html>

1 个答案:

答案 0 :(得分:0)

您缺少以移动设备屏幕尺寸显示的菜单按钮的代码。你需要在navbar-header

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="page_principal.php">
        <img alt="Brand" width="auto" height="30" align="top" src="../Images/logovale.png">
    </a>
</div>