如何切换自定义导航栏？答案

【问题标题】：How to toggle custom navbar?如何切换自定义导航栏？
【发布时间】：2015-08-23 13:11:50
【问题描述】：

我正在尝试切换导航栏，但它不是 Bootstrap3 默认导航栏，所以通常

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

不工作。是否可以在检测到小屏幕时将此导航栏更改为按钮，并且当一个项目被拾取时，它会恢复为按钮。我是网络开发的新手，但我有一些编码背景，所以快速修复将不胜感激。谢谢！

<body class="home page page-id-2 page-template-default desktop">
    <div style="position:absolute; left:-3364px; top:-3571px;"></div>
    <div id="container" class="sidebar-open">
        <header id="header" role="banner">

            <div class="logo-main-wrap">
                <div>
                    <div id="logo">
                        <a href="index.html" rel="nofollow"><span></span></a>

                    </div>
                    <nav role="navigation">
                        <ul id="menu-main" class="nav top-nav clearfix">

                            <li id="menu-item-703" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-703">
                                <a href="index.html"><span>Anasayfa</span></a>
                            </li>
                            <li id="menu-item-704" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-704">
                                <a href="urunler.html"><span>Ürünler</span></a>
                                <ul class="sub-menu">
                                    <li id="menu-item-3946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3946">
                                        <a href="about/leadership.html"><span>Sızdırmaz Kaportalar</span></a>
                                    </li>
                                    <li id="menu-item-3945" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3945">
                                        <a href="about/staff.html"><span>Askeri Projeler</span></a>
                                    </li>
                                    <li id="menu-item-4245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4245">
                                        <a href="careers.html"><span>DİĞER GEMİ ÜRÜNLERİ</span></a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item-3696" class="leadership menu-item menu-item-type-post_type menu-item-object-page menu-item-3696">
                                <a href="about/leadership.html"><span>Leadership</span></a>
                            </li>
                            <li id="menu-item-3944" class="staff menu-item menu-item-type-post_type menu-item-object-page menu-item-3944">
                                <a href="about/staff.html"><span>Staff</span></a>
                            </li>
                            <li id="menu-item-702" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-702">
                                <a href="kurumsal.html"><span>Kurumsal</span></a>
                            </li>
                            <li id="menu-item-701" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-701">
                                <a href="sertifikalar.html"><span>Sertİfİkalar</span></a>
                            </li>
                            <li id="menu-item-705" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-705">
                                <a href="referanslar.html"><span>Referanslar</span></a>
                            </li>
                            <li id="menu-item-700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-700">
                                <a href="#iletisim"><span>İletİşİm</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

我假设你需要这样 DEMO

<nav class="navbar navbar-inverse " role="navigation">
   <div class ="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse" id="btn">
         <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="#"><img src="/05/logo2.png" class="img-responsive" alt=""/></a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav" id="men">
           <li id="menu-item-723" class="menu-item "><a href="#">Philosophy</a></li>
<li id="menu-item-724" class="menu-item"><a href="#">Team</a></li>
<li id="menu-item-539" class="menu-item"><a href="#">Blog</a></li>
          <li id="menu-item-540" class="menu-item "><a href="#">Contact</a></li>
      </ul>
   </div>

</nav>

【讨论】：

你的方式是我的默认方式。但我更改了我的类名，因为我在 CSS 和 LESS 中使用它们。