Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我不确定在单击移动视图上的按钮后，我需要为要弹出的菜单编写什么代码。以下是移动版按钮的屏幕截图

https://gyazo.com/03a1ef176ad7f1aec6be029f47d345b0

任何帮助将不胜感激。

Answer 1

您需要使用CSS和JavaScript。 HTML无法更改DOM元素。 W3有一个如何here。

由于您说您正在使用Bootstrap，因此他们拥有关于其导航栏如何工作的出色文档。您可以找到相关部分here。

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

内容的HTML，样式的CSS，功能的JavaScript。虽然CSS和JavaScript框架现在有些模糊了。

Answer 2

这里有一个快速的小提琴你可以使用点击绑定等改进但它会让你开始 https://jsfiddle.net/Steven_Whitby/rg84t62f/

HTML

    <div class="menu-bar">
    <ul>
        <li class="menu-item" onMouseOver="$('.drop-menu').show()" onMouseOut="$('.drop-menu').hide()" style="list-style: none;cursor: default;">
            Dropdown Link
            <ul class="drop-menu">
                <li class="drop-item"><a href="#">One</a></li>
                <li class="drop-item"><a href="#">Two</a></li>
                <li class="drop-item"><a href="#">Three</a></li>
                <li class="drop-item"><a href="#">Four</a></li>
                <li class="drop-item"><a href="#">Five</a></li>
                <li class="drop-item"><a href="#">Six</a></li>
                <li class="drop-item"><a href="#">Seven</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

a {
    color:white;
    text-decoration: none;
}
.menu-bar {
    background-color: #57578b;
    height: 25px;
}
.menu-item {
    padding: 0 4px 0 4px;
    color: rgb(255, 255, 255);
    border-radius: 1px;
    margin: 2px;
    float: left;
    /* font-size: 1.2em; */
    text-decoration: none!important;
    cursor: pointer;
}
.menu-item:hover {
    background-color: white;
    color: black;
}
.drop-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 5px 0;
    background-color: rgb(87, 87, 138);
    -webkit-background-clip: padding-box;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    overflow: hidden;
}
.drop-item {
    padding: 4px 10px 4px 10px;
    color: rgb(255, 255, 255);
    cursor: pointer;
}
.drop-item:hover {
    background-color: rgb(181, 178, 178);
    color: black;
}

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

2 个答案: