【每日一练】98—动画下拉菜单效果的实现

最新推荐文章于 2022-12-22 00:02:10 发布

web前端开发V

最新推荐文章于 2022-12-22 00:02:10 发布

阅读量259

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649133943&idx=3&sn=1d9438a9a5ed4d5bcc7dde9a1e05cca0&chksm=be58b4da892f3dcca2fe5f30b55bf2b0f944f99562b6b112f9bd2442ff1c94654a2a7f30172b&scene=126&&sessionid=0

版权

写在前面

下拉菜单一直是web项目里比较常见的一个功能，它的出现，可以让我们在有限的页面空间里实现更多的选择。

今天这个下拉菜单效果，也没有什么特别的地方，是一个比较常见效果，具体的效果，请看下面的最终效果：

看完了效果，现在我们一起来看一下，它的最终代码实现过程。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】98—动画下拉菜单效果的实现</title>
</head>
<body>
  <div class="dropdown">
    <input type="text" class="text2" readonly placeholder="选择你擅长的技能">
    <div class="option">
      <div onmouseover="show('html')">HTML</div>
      <div onmouseover="show('CSS')">CSS</div>
      <div onmouseover="show('JavaScript')">JavaScript</div>
      <div onmouseover="show('ReactJS')">ReactJS</div>
      <div onmouseover="show('VueJS')">VueJS</div>
    </div>
   </div>
  
   <script>
     function show(a){
       document.querySelector('.text2').value = a;
     }
     let dropdown = document.querySelector('.dropdown');
     dropdown.onclick = function(){
      dropdown.classList.toggle('active')
     }
</script>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #f9f9f9;
}
.dropdown 
{
  position: relative;
  margin-top: 100px;
  width: 300px;
  height: 50px;
}
.dropdown::before 
{
  content: '';
  position: absolute;
  top: 25px;
  right: 28px;
  width: 12px;
  height: 2px;
  background: #555;
  transform: rotate(40deg);
  z-index: 10;
  transition: 0.5s;
}
.dropdown.active::before 
{
  right: 20px;
}
.dropdown::after 
{
  content: '';
  position: absolute;
  top: 25px;
  right: 20px;
  width: 12px;
  height: 2px;
  background: #555;
  transform: rotate(-40deg);
  z-index: 10;
  transition: 0.5s;
}
.dropdown.active::after 
{
  right: 28px;
}
.dropdown input 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 16px;
  background: #fff;
  text-transform: capitalize;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  outline: none;
}
.dropdown .option 
{
  position: absolute;
  top: 70px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 30px rgba(0,0,0,0.05);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s;
}
.dropdown.active .option 
{
  visibility: visible;
  opacity: 1;
}
.dropdown .option div 
{
  padding: 12px 20px;
  cursor: pointer;
}
.dropdown .option div:hover 
{
  background: #62baea;
  color: #fff;
}

写在最后

以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】98—动画下拉菜单效果的实现

写在前面下拉菜单一直是web项目里比较常见的一个功能，它的出现，可以让我们在有限的页面空间里实现更多的选择。今天这个下拉菜单效果，也没有什么特别的地方，是一个比较常见效果，具体的效果，请看下面的最终效果：看完了效果，现在我们一起来看一下，它的最终代码实现过程。HTML代码：<!DOCTYPE html><html><head><title>【每...
复制链接

扫一扫