【每日一练】206—下拉菜单效果

每日一练1年前 (2023)发布 admin

1,503 0 3

以下是今天每日一练的最终效果：

【每日一练】206—下拉菜单效果

HTML:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″ />

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

<title>【每日一练】第206练</title>

<link

rel=”stylesheet”

href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css”

integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==”

crossorigin=”anonymous”

referrerpolicy=”no-referrer”

/>

<link rel=”stylesheet” href=”index.css” />

</head>

<body>

<div class=”menu”>

<p>今天需要做的几件事情</p>

<i class=”fas fa-angle-down”></i>

</div>

<ul class=”social-lists hide”>

<li>

<p>01-学习编程</p>

</li>

<li>

<p>02-看书阅读</p>

</li>

<li>

<p>03-运动减肥</p>

</li>

<li>

<p>04-摄影修片</p>

</li>

</ul>

<script src=”index.js”></script>

</body>

</html>

CSS:

body {

margin: 0;

display: flex;

flex-direction: column;

align-items: center;

height: 100vh;

justify-content: center;

font-family: sans-serif;

background: #444;

}

.menu {

background: #fff;

width: 300px;

opacity: 0.3;

border-radius: 5px;

display: flex;

align-items: center;

justify-content: space-between;

padding: 10px;

cursor: pointer;

}

.menu .fas{

transition: transform .5s;

}

.menu p {

margin: 0 10px;

display: flex;

align-items: center;

color:#222;

}

.social-lists {

background: #fff;

width: 300px;

padding: 10px;

opacity: 0.3;

list-style-type: none;

border-radius: 5px;

}

.social-lists li {

display: flex;

align-items: center;

cursor: pointer;

transition: padding 0.2s linear;

}

.social-lists li:hover {

background: #555;

border-radius: 5px;

padding-left: 10px;

color:#fff;

}

.social-lists li .fab {

margin: 0 10px;

}

.rotate .fas {

transform: rotate(180deg);

}

.hide {

visibility: hidden;

}

JS:

const menuEl = document.querySelector(“.menu”);

const menuTextEl = document.querySelector(“.menu p”);

const socialListsEl = document.querySelector(“.social-lists”);

const liEls = document.querySelectorAll(“.social-lists li”);

menuEl.addEventListener(“click”, () => {

socialListsEl.classList.toggle(“hide”);

menuEl.classList.toggle(“rotate”);

});

liEls.forEach((liEl) => {

liEl.addEventListener(“click”, () => {

menuTextEl.innerHTML = liEl.innerHTML;

socialListsEl.classList.add(“hide”);

menuEl.classList.toggle(“rotate”);

});

});

写在最后

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

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

# 每日一练 # 练习项目 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】240—JS实现一款图片搜索应用程序

admin

2,545 9

【每日一练】225—JS实现一款黑暗模式效果

admin

2,371 8

【每日一练】205—折叠菜单栏效果

admin

1,543 5

【每日一练】85- CSS分层文本阴影效果生成器的实现

admin

2,256 5

【每日一练】01—CSS实现3D菜单效果

admin

2,520 4

【每日一练】210—视频预告片弹出窗口

admin

1,494 7

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台