如何使此导航栏具有响应性，使其可以通过按钮访问？

Question

这是我的 HTML：

    <div class = "nav">
        <div class = "top_page">
            <h1 class = "mainTitle">title</h1>
            <p class = "slogan">Slogan</p>
            <br/>
        </div>
        <div class = "container">
            <nav class="center-links">
                <a href="/about" class = "content" >About</a>
                <a href="/projects" class = "content" >Work</a>
                <a href="/recruit" class = "content" >Contact</a>
                <a href="/recruit" class = "content" >Recruit</a></li>
            </nav>
        </div>
        <br />
        <br />
    </div>

以及我当前的 CSS（屏幕宽度超过 808 像素）：

.center-links {
    display: table;
    table-layout: fixed;
    width: 100%;
    text-align: center;
}
.center-links a {
    display: table-cell;
    background-color: #212A5C;
    border: 1px solid #212A5C;
    color: #FA3400;
    font-weight: bold;
    padding: 1.5%;
    text-transform: uppercase;
}
.center-links a:hover {
    background-color: rgb(230, 230, 230);
    transition-duration: 0.7s;
}

我可以使用什么 CSS/jQuery/Javascript 代码将这个菜单折叠到 Bar Icon from awesome fonts 中，然后单击即可显示链接？ 谢谢！不使用引导程序

Answer 1

如果您使用的是引导程序，则需要使用此标记来做您想做的事情：

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation">
              <input type="hidden" id="pagesNr" value="2"/>
                  <div class="container">
                        <div class="navbar-header">
                              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
              <a href="#" class="navbar-brand ">Company Name</a>
          </div>
         <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav scroll-nav" id="sortableMenuItems">
                  <li">
                     <a href="#">Home</a>
                  </li>
                  <li>
                     <a href="#">Menu 2</a>
                 </li>
                 <li>
                   <a href="#">Menu 3</a>
                </li>
                <li>
                   <a href="#">Menu 4</a>
                </li>
                <li>
                    <a href="#">Menu 5</a>
               </li>
          </ul>
     </nav>
 </div>

当您在小型设备中看到此菜单时，它将折叠并在右侧显示“汉堡”图标。

为了回答您的回复，我已对此进行了更新，因此要使用引导程序，您需要在 HTML 页面的“head”标签中添加以下内容：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

使用您的代码解决此问题的方法是创建一个隐藏的下拉菜单，当浏览器以特定定义的宽度调整大小时将出现该菜单，为此您必须使用@media 查询。但我真的相信这不是你必须遵循的选择。