将下拉菜单添加到三行菜单图标

时间：2017-05-26 17:37:26

标签： javascript html css

我正在使用示例从w3为我的网站创建一个菜单图标。它很好用，但是当我点击图标时，我正在尝试添加一个下拉菜单。

我添加了div id="mydropdown"以尝试创建我想要的菜单。

＆＃13;
＆＃13; 
function myFunction(x) {
    x.classList.toggle("change");
}
＆＃13; 
    .container {
        display: inline-block;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    
    /* Rotate first bar */
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }
    
    /* Fade out the second bar */
    .change .bar2 {
        opacity: 0;
    }
    
    /* Rotate last bar */
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
＆＃13; 
 
    <h1>
         <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>

                <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
                </div>
            </div>
    </h1>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

解决方案1（仅限JS）：

切换图标时，还要切换下拉菜单显示/隐藏。

function myFunction(x) {
  x.classList.toggle("change");
  var dropdown = document.getElementById('myDropdown').style;
  dropdown.display = dropdown.display === 'none' ? 'block' : 'none';
}


.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
<html>

<body>
  <h1>
    <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>

      <div id="myDropdown" class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </h1>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
      var dropdown = document.getElementById('myDropdown').style;
      dropdown.display = dropdown.display === 'none' ? 'block' : 'none';
    }
  </script>
</body>
<html>

解决方案2（JS + CSS）：

向css添加.hide课程，然后在切换图标时在下拉列表中切换此课程。

function myFunction(x) {
  x.classList.toggle("change");
  document.getElementById('myDropdown').classList.toggle("hide");
}


.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.hide {
  display: none;
}
<html>

<body>
  <h1>
    <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>

      <div id="myDropdown" class="dropdown-content hide">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </h1>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
      document.getElementById('myDropdown').classList.toggle("hide");
    }
  </script>
</body>
<html>

答案 1 :(得分：1)

点击左键切换下拉列表的样式 document.getElementById('myDropdown').style.display = document.getElementById('myDropdown').style.display =='block' ? 'none' : 'block'; 

function myFunction(x) {
    x.classList.toggle("change");
    
    document.getElementById('myDropdown').style.display = document.getElementById('myDropdown').style.display =='block' ?   'none' : 'block';
}
.container {
        display: inline-block;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    
    /* Rotate first bar */
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }
    
    /* Fade out the second bar */
    .change .bar2 {
        opacity: 0;
    }
    
    /* Rotate last bar */
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
    .dropdown-content{
      display:none;
    }
<h1>
         <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>

                <div id="myDropdown" class="dropdown-content">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
            </div>
    </h1>

相关问题
最新问题