响应式单页分类网址导航html模板

最新推荐文章于 2023-06-29 15:32:53 发布

davidzhang78

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量585

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/davidzhang78/article/details/131346469

版权

手头有几个闲置的域名，准备拿来做一些简单的导航类网站，于是写了个简单的响应式分类网址导航demo，代码如下。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网址导航</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .logo {
    text-align: center;
    padding: 20px 0;
  }

  .nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu-item {
    margin: 0 10px;
  }

  .link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .link-list li {
    width: 200px;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 5px;
    margin: 10px;
    text-align: center;
  }

  .link-list li a {
    color: #333;
    text-decoration: none;
  }

  @media screen and (max-width: 768px) {
    .link-list li {
      width: 100%;
    }
  }
</style>


</head>
<body>
  <div class="logo">
    <!-- 在这里放置你的Logo图片或文字 -->
  </div>

  <!-- 导航菜单 -->
  <ul class="nav-menu menu">
    <li class="menu-item">
      <a href="javascript:;" onClick="showCategory('category1')">分类1</a>
    </li>
    <li class="menu-item">
      <a href="javascript:;" onClick="showCategory('category2')">分类2</a>
    </li>
    <li class="menu-item">
      <a href="javascript:;" onClick="showCategory('category3')">分类3</a>
    </li>
  </ul>

  <!-- 网址导航内容区域 -->
  <div id="categoryContent">
    <ul class="link-list active" id="category1Content">
      <li><a href="https://www.example1.com">链接1</a></li>
      <li><a href="https://www.example2.com">链接2</a></li>
      <li><a href="https://www.example3.com">链接3</a></li>
      <li><a href="https://www.example4.com">链接4</a></li>
      <li><a href="https://www.example5.com">链接5</a></li>
      <li><a href="https://www.example6.com">链接6</a></li>
      <li><a href="https://www.example7.com">链接7</a></li>
      <li><a href="https://www.example8.com">链接8</a></li>
      <li><a href="https://www.example9.com">链接9</a></li>
      <li><a href="https://www.example1.com">链接10</a></li>
    </ul>
    <ul class="link-list" id="category2Content">
      <li><a href="https://www.example1.com">链接11</a></li>
      <li><a href="https://www.example2.com">链接12</a></li>
      <li><a href="https://www.example3.com">链接13</a></li>
      <li><a href="https://www.example4.com">链接14</a></li>
      <li><a href="https://www.example5.com">链接15</a></li>
      <li><a href="https://www.example6.com">链接16</a></li>
      <li><a href="https://www.example7.com">链接17</a></li>
      <li><a href="https://www.example8.com">链接18</a></li>
      <li><a href="https://www.example9.com">链接19</a></li>
      <li><a href="https://www.example1.com">链接20</a></li>
    </ul>
    <ul class="link-list" id="category3Content">
      <li><a href="https://www.example1.com">链接21</a></li>
      <li><a href="https://www.example2.com">链接22</a></li>
      <li><a href="https://www.example3.com">链接23</a></li>
      <li><a href="https://www.example4.com">链接24</a></li>
      <li><a href="https://www.example5.com">链接25</a></li>
      <li><a href="https://www.example6.com">链接26</a></li>
      <li><a href="https://www.example7.com">链接27</a></li>
      <li><a href="https://www.example8.com">链接28</a></li>
      <li><a href="https://www.example9.com">链接29</a></li>
      <li><a href="https://www.example1.com">链接30</a></li>
    </ul>
  </div>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    // 隐藏分类2和分类3的内容
    var category2Content = document.getElementById('category2Content');
    var category3Content = document.getElementById('category3Content');

    // 设置初始显示方式为flex
    category2Content.style.display = 'flex';
    category3Content.style.display = 'flex';

    // 默认显示分类1的内容
    showCategory('category1');
  });

  // 显示特定分类的网址导航内容
  function showCategory(category) {
    var categoryContent = document.getElementById('categoryContent');
    var category1Content = document.getElementById('category1Content');
    var category2Content = document.getElementById('category2Content');
    var category3Content = document.getElementById('category3Content');

    // 隐藏所有分类的内容
    category1Content.style.display = 'none';
    category2Content.style.display = 'none';
    category3Content.style.display = 'none';

    // 根据选择显示对应分类的内容
    if (category === 'category1') {
      category1Content.style.display = 'flex';
    } else if (category === 'category2') {
      category2Content.style.display = 'flex';
    } else if (category === 'category3') {
      category3Content.style.display = 'flex';
    }
  }
</script>


</body>
</html>