html and css 制作展开收缩的导航菜单cid1098-网页前端设计

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title></title>
  7. <link rel="stylesheet" href="https://code.5g-o.com/wp-content/uploads/2020/09/style-5.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <img src="https://code.5g-o.com/wp-content/uploads/2020/09/img.jpg" alt="" class="image">
  12. <div class="accordion-menu">
  13. <div class="item" id="item1">
  14. <a href="#item1" class="title">
  15. <span>Lorem ipsum dolor sit amet?</span>
  16. <i class="icon"></i>
  17. </a>
  18. <p class="text">
  19. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque?
  20. </p>
  21. </div>
  22. <div class="item" id="item2">
  23. <a href="#item2" class="title">
  24. <span>Lorem ipsum dolor sit amet?</span>
  25. <i class="icon"></i>
  26. </a>
  27. <p class="text">
  28. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque?
  29. </p>
  30. </div>
  31. <div class="item" id="item3">
  32. <a href="#item3" class="title">
  33. <span>Lorem ipsum dolor sit amet?</span>
  34. <i class="icon"></i>
  35. </a>
  36. <p class="text">
  37. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque?
  38. </p>
  39. </div>
  40. <div class="item" id="item4">
  41. <a href="#item4" class="title">
  42. <span>Lorem ipsum dolor sit amet?</span>
  43. <i class="icon"></i>
  44. </a>
  45. <p class="text">
  46. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque?
  47. </p>
  48. </div>
  49. </div>
  50. </div>
  51. </body>
  52. </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://code.5g-o.com/wp-content/uploads/2020/09/style-5.css">
</head>
<body>
  <div class="container">
    <img src="https://code.5g-o.com/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>

 

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. font-family: "Open Sans", sans-serif;
  5. box-sizing: border-box;
  6. text-decoration: none;
  7. }
  8. body{
  9. background: url(https://code.5g-o.com/wp-content/uploads/2020/09/bg-2.jpg) no-repeat center;
  10. background-size: cover;
  11. min-height: 100vh;
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. .container{
  17. max-width: 1200px;
  18. padding: 0 40px;
  19. display: flex;
  20. align-items: center;
  21. justify-content: space-between;
  22. flex-wrap: wrap;
  23. }
  24. .image, .accordion-menu{
  25. width: calc(50% - 20px);
  26. }
  27. .title{
  28. background-color: #e77f67;
  29. display: flex;
  30. color: #fff;
  31. padding: 20px;
  32. cursor: pointer;
  33. text-transform: uppercase;
  34. font-size: 14px;
  35. font-weight: 600;
  36. align-items: center;
  37. justify-content: space-between;
  38. }
  39. .icon{
  40. position: relative;
  41. width: 14px;
  42. }
  43. .icon::before, .icon::after{
  44. content: "";
  45. position: absolute;
  46. width: 14px;
  47. height: 3px;
  48. background-color: #fff;
  49. top: -1.5px;
  50. }
  51. .icon::after{
  52. transform: rotate(90deg);
  53. transition: .5s linear;
  54. }
  55. .text{
  56. background-color: #ffffff60;
  57. color: #fff;
  58. line-height: 26px;
  59. margin: 6px 0;
  60. opacity: 0;
  61. height: 0;
  62. }
  63. .item:target .text{
  64. height: auto;
  65. opacity: 1;
  66. padding: 20px;
  67. margin: 12px 0;
  68. }
  69. .item:target .icon::after{
  70. transform: rotate(0);
  71. }
  72. @media screen and (max-width:960px){
  73. .container{
  74. max-width: 600px;
  75. }
  76. .image, .accordion-menu{
  77. width: 100%;
  78. margin: 20px 0;
  79. }
  80. }
*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body{
  background: url(https://code.5g-o.com/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;
  }
}

在线演示


让链接同时具备两种打开方式
获取源码: Accordion Menu 1
下载数:123人次, 文件大小: 481.1 KB, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,854 人查阅

类似文章