Question

当小型设备访问该页面时，如何从下拉菜单中转换普通菜单？我的代码是这样的，它有响应但我不知道如何实现这种菜单。我想把那个＆＃39;汉堡菜单＆＃39;。

Ps：我无法修改html

HTML更新：

    <div id="pai" class="row">
  <div class="col-xs-12 col-xs-10">
    <div class="menu">
     <nav>
     <div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
      <div class="container-fluid">

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>

         <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="menu" class="nav navbar-nav">
          <li class="LogoPosicao">  <img class="img-responsive" id="imagemBBlogo"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
          <li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
          <li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
          <li><a class="Quebra">|</a></li>
          <li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
          <li id="contatoLI"><a class="Contato" href="#Contato-Site" button  type="button"  data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
        </ul>
        </div>
      </div>
    </div>
    </nav>
  </div>

</div>

Answer 1

刚刚做到了。

<div id="pai" class="row">
  <div class="col-xs-12 col-xs-10">
    <div class="menu">
     <nav>
     <div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
      <div class="container-fluid">

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>

         <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="menu" class="nav navbar-nav">
          <li class="LogoPosicao">  <img class="img-responsive" id="imagemBBlogo"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
          <li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
          <li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
          <li><a class="Quebra">|</a></li>
          <li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
          <li id="contatoLI"><a class="Contato" href="#Contato-Site" button  type="button"  data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
        </ul>
        </div>
      </div>
    </div>
    </nav>
  </div>

</div>

转换下拉菜单中的菜单

1 个答案: