今天记一个动态下拉菜单的实现.

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>下拉菜单</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div style="text-align: center;">
    <ul class='clearfix' style="display: inline-block;" >
      <li class="list">
        <p>涂山</p>
        <ul class='select'>
          <li>红红</li>
          <li>雅雅</li>
          <li>苏苏</li>
          <li>容容</li>
        </ul>
      </li>
      <li class="list">
        <p>四大天王</p>
        <ul class='select'>
          <li>东邪</li>
          <li>西毒</li>
          <li>南帝</li>
          <li>北丐</li>
        </ul>
      </li>
    </ul>
  </div>
  </body>
</html>

css部分

//清除默认格式
*{
  list-style:none;
  padding: 0;
  margin: 0;
}
//清除浮动定位带来的八阿哥
.clearfix::after{
  content:'';
  display: block;
  clear: both;
}
//好兄弟,肩并肩
div > ul > li{
  float: left;
  position: relative;
}
//兄弟之间也是有距离的
.list{
  margin: 0 10px  ;
}
//下拉菜单默认不出现
.select{
  display: none;
  position: absolute;
  left: 0;
  border: 1px solid pink;
  border-radius: 4px;
}
//增加类,让菜单出现
div > ul > li.active .select{
  display: block;
  animation: lefttoright 1s;
}
//防止文字换行
.select > li{
  white-space: nowrap;
  margin: 8px 8px 8px 0px;
}
//动态效果
@keyframes lefttoright{
  from{
    margin-left:100%; 
  }
  to{
    margin-left: 0;
  }
}

js部分

    let pTags = document.querySelectorAll('div > ul > li');
    for (let i = 0; i < pTags.length; i++) {
            pTags[i].onmouseenter = function (x) {
                x.currentTarget.classList.add('active')
            }
            pTags[i].onmouseleave = function (x) {
                x.currentTarget.classList.remove('active') 
            }
        }

pTags 存着该选择器下的两个<li>节点,鼠标移动到该节点上就为该节点增加类'active'来更改选择器.鼠标离开时则移除该类名.

动态下拉菜单,非hover

今天记一个动态下拉菜单的实现.

html部分

css部分

js部分