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中折叠此菜单，该按钮会显示点击链接吗？谢谢！不使用bootstrap

Answer 1

如果您使用的是bootstrap而不是需要使用此标记来执行您想要的操作：

<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>

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

要回复您的回复，我已对此进行了更新，因此要使用bootstrap，您需要在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查询。但我真的相信这不是你必须遵循的选择。

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

1 个答案: