html - 如何将文本链接添加到下拉导航

Question

我已经为我的网站创建了适用于移动设备的三层按钮，但是当我点击它时，没有任何反应。我不确定如何添加该功能，因此当您单击它时，全屏显示的主页等导航链接会出现在按钮的下拉列表中。以下是我到目前为止编写的代码。

nav .menu-holder {
  width: calc(90px + 20px);
  height: 100%;
  padding: 30px 20px;
  background: transparent;
  text-align: right;
  position: absolute;
  right: 0;
}

nav .menu-holder .menu-icon {
  position: relative;
  height: 100%;
  cursor: pointer;
}

nav .menu-holder .menu-icon span {
  max-width: 30px;
  height: 2px;
  width: 100%;
  background: #ffffff;
  position: absolute;
  right: 50%;
  margin-right: -15px;
}

nav .menu-holder .menu-icon span:nth-child(1) {
  top: 0;
}

nav .menu-holder .menu-icon span:nth-child(2) {
  top: calc(50% - 1px);
}

nav .menu-holder .menu-icon span:nth-child(3) {
  bottom: 0;
}

@media (min-width: 1024px) {
  nav .menu-holder {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav>
  <div class="container">
    <div class="row">
      <div class="col-2 col-lg-3">
        <img src="http://www.placecage.com/60/60" class="logo-holder" alt="Site Logo">
      </div>
      <div class="col-10 col-lg-9">
        <div class="menu-holder">
          <div class="menu-icon">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <ul class="cssmenu">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li class="hasDropdown">
            <a href="#">Dropdown Link</a>
            <ul>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
              <li><a href="#">Four</a></li>
              <li><a href="#">Five</a></li>
              <li><a href="#">Six</a></li>
              <li><a href="#">Seven</a></li>
            </ul>
          </li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

我不确定我需要编写什么代码才能在您单击移动 View 上的按钮后弹出菜单。这里是手机版按钮的截图

https://gyazo.com/03a1ef176ad7f1aec6be029f47d345b0

任何帮助将不胜感激。

Answer 1

您将需要使用 CSS 和 JavaScript。 HTML 没有改变 DOM 元素的能力。 W3 有一个方法 here .

既然你说你正在使用 Bootstrap，他们有关于他们的导航栏如何工作的优秀文档。您可以找到相关部分 here .

看起来您的代码主要缺少相关的 Bootstrap 类。一旦你添加了那些你应该是好的。

HTML 用于内容，CSS 用于样式，JavaScript 用于功能。尽管现在 CSS 和 JavaScript 框架模糊了界限。