Question

我必须做一个导航栏，右边是幻灯片，就像https://evernote.com/

一样

这是我的代码：

<nav class="navbar navbar-inverse" style="padding-top:20px;">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <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="#" style="padding:0px;"><img src="img/logo.png"></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse" style="text-align:center; width:490px; font-size:35px;position:absolute; top:-10px; right:0">
        <ul class="nav navbar-nav">
          <li class="passivx" style="padding-top:20px; padding-bottom:20px; padding-right:30px; text-align:right;"><button data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:#3081c5; color:#fff; border:none;"><b>X</b></button></li>
          <li class="active" id="activelink" style="padding-top:97px; "><a href="#">FŐOLDAL</a></li>
          <li class="passiv" style="text-align:center;"><a href="#ref">REFERENCIÁK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#rolunk">RÓLUNK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#infokt">INFORMATIKAI OKTATÁS<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#szatr">SZAKMAI TRÉNINGEK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#feszo" style="height:155px; padding-top:30px;">FELNŐTTKÉPZÉSI <br><br><br><br> SZOLGÁLTATÁSOK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#dobedo">DOBEDU<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv" ><a href="#contact">KAPCSOLAT</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

但是，我的菜单从顶部显示，而不是从右侧显示。我怎样才能让它从右边出现？

Answer 1

要做你想做的事，你可以在这里找到一个好的Bootstrap扩展：

http://jasny.github.io/bootstrap/javascript/#offcanvas

左侧的Bootstrap导航栏幻灯片

1 个答案: