html and css 制作展开收缩的导航菜单id1098-网页前端设计
源码下载地址 在新演示地址
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="https://www.5g-o.com/codedesign/wp-content/uploads/2020/09/style-5.css"> </head> <body> <div class="container"> <img src="https://www.5g-o.com/codedesign/wp-content/uploads/2020/09/img.jpg" alt="" class="image"> <div class="accordion-menu"> <div class="item" id="item1"> <a href="#item1" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item2"> <a href="#item2" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item3"> <a href="#item3" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item4"> <a href="#item4" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> </div> </div> </body> </html>css
*{ margin: 0; padding: 0; font-family: "Open Sans", sans-serif; box-sizing: border-box; text-decoration: none; } body{ background: url(https://www.5g-o.com/codedesign/wp-content/uploads/2020/09/bg-2.jpg) no-repeat center; background-size: cover; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container{ max-width: 1200px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .image, .accordion-menu{ width: calc(50% - 20px); } .title{ background-color: #e77f67; display: flex; color: #fff; padding: 20px; cursor: pointer; text-transform: uppercase; font-size: 14px; font-weight: 600; align-items: center; justify-content: space-between; } .icon{ position: relative; width: 14px; } .icon::before, .icon::after{ content: ""; position: absolute; width: 14px; height: 3px; background-color: #fff; top: -1.5px; } .icon::after{ transform: rotate(90deg); transition: .5s linear; } .text{ background-color: #ffffff60; color: #fff; line-height: 26px; margin: 6px 0; opacity: 0; height: 0; } .item:target .text{ height: auto; opacity: 1; padding: 20px; margin: 12px 0; } .item:target .icon::after{ transform: rotate(0); } @media screen and (max-width:960px){ .container{ max-width: 600px; } .image, .accordion-menu{ width: 100%; margin: 20px 0; } }源码下载地址
在新演示地址
点赞 评论 转发就是对up的最大支持和鼓励， 非常谢谢!
