1 / 1
快捷键: ← → 切换
R 旋转 F 翻转 0 重置

响应式Header导航栏源码分享

言心
2025-11-14 21:17:19 131 阅读 · 技术科技 · 管理员
原创 编程
第一，首先创建基本的脚手架html代码，（如果本地有fontawesome-free-5.15.4-web的图标文件的，可以直接引入，如果没有那就使用图标代替搜索图标search-icon）
  1. <nav class="navbar">

  2.         <div class="nav-container">

  3.             <button class="menu-toggle">☰</button>

  4. 

  5.             <div class="nav-logo">

  6.                 <a href="#">

  7.                     小言心

  8.                 </a>

  9.             </div>

  10. 

  11.             <ul class="nav-menu">

  12.                 <li class="nav-item">

  13.                     <a href="#" class="nav-link active" data-index="0">首页</a>

  14.                 </li>

  15.                 <li class="nav-item">

  16.                     <a href="#" class="nav-link" data-index="1">发现</a>

  17.                 </li>

  18.                 <li class="nav-item">

  19.                     <a href="#" class="nav-link" data-index="2">等你来答</a>

  20.                 </li>

  21.                 <li class="nav-item">

  22.                     <a href="#" class="nav-link" data-index="3">会员</a>

  23.                 </li>

  24.                 <li class="nav-item">

  25.                     <a href="#" class="nav-link" data-index="4">Live</a>

  26.                 </li>

  27.                 <li class="nav-item">

  28.                     <a href="#" class="nav-link" data-index="5">书店</a>

  29.                 </li>

  30.             </ul>

  31. 

  32.             <!-- 高亮条 -->

  33.             <div class="highlight-bar"></div>

  34. 

  35.             <div class="search-container">

  36.                 <input type="text" class="search-box" placeholder="搜索小言心内容">

  37.                 <button class="search-icon " type="button" aria-label="搜索">

  38.                     <i class="fas fa-search"></i>

  39.                 </button>

  40.             </div>

  41. 

  42.             <div class="nav-actions">

  43. 

  44.                 <div class="dropdown">

  45.                     <div class="user-avatar">知</div>

  46.                     <div class="dropdown-content">

  47.                         <a href="#" class="dropdown-item">我的主页</a>

  48.                         <a href="#" class="dropdown-item">私信</a>

  49.                         <a href="#" class="dropdown-item">创作中心</a>

  50.                         <a href="#" class="dropdown-item">设置</a>

  51.                         <a href="#" class="dropdown-item">退出</a>

  52.                     </div>

  53.                 </div>

  54.                 <button class="nav-button">提问</button>

  55.             </div>

  56.         </div>

  57.     </nav>
二，创建基本的style样式
  1. * {

  2.             margin: 0;

  3.             padding: 0;

  4.             box-sizing: border-box;

  5.             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  6.         }

  7. 

  8.         body {

  9.             background-color: #f6f6f6;

  10.             padding: 0;

  11.             margin: 0;

  12.         }

  13. 

  14.         .navbar {

  15.             background-color: #ffffff;

  16.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  17.             position: sticky;

  18.             top: 0;

  19.             z-index: 1000;

  20.             padding: 7px 16px;

  21.         }

  22. 

  23.         .nav-container {

  24.             max-width: 1200px;

  25.             margin: 0 auto;

  26.             display: flex;

  27.             align-items: center;

  28.             height: 52px;

  29.             position: relative;

  30.         }

  31. 

  32.         .nav-logo {

  33.             margin-right: 20px;

  34.         }

  35. 

  36.         .nav-logo a {

  37.             display: flex;

  38.             align-items: center;

  39.             text-decoration: none;

  40.             color: #0084ff;

  41.             font-size: 24px;

  42.             font-weight: 600;

  43.         }

  44. 

  45. 

  46.         .nav-menu {

  47.             display: flex;

  48.             list-style: none;

  49.             margin-right: auto;

  50.             position: relative;

  51.         }

  52. 

  53.         .nav-item {

  54.             margin-right: 20px;

  55.             position: relative;

  56.         }

  57. 

  58.         .nav-link {

  59.             text-decoration: none;     color: #373a40;

  60.             font-size: 15px;

  61.             padding: 16px 0;

  62.             display: inline-block;

  63.             position: relative;

  64.             transition: color 0.3s;

  65.             cursor: pointer;

  66.         }

  67. 

  68.         .nav-link:hover {

  69.             transition: 0.3s ease-in;

  70.             font-weight: 600;

  71.         }

  72. 

  73.         .nav-link.active { 

  74.             font-weight: 600;

  75.             color: #191B1F;

  76.         }

  77. 

  78.         /* 高亮条 */

  79.         .highlight-bar {

  80.             position: absolute;

  81.             bottom: 0;

  82.             height: 3px;

  83.             background-color: #0084ff;

  84.             transition: all 0.3s ease;

  85.             border-radius: 1.5px;

  86.         }

  87. 

  88.         .search-container {

  89.             position: relative;

  90.             margin-right: 20px;

  91.             flex: 0 1 400px;

  92.         }

  93. 

  94.         .search-box {

  95.             width: 100%;

  96.             padding: 8px 12px;

  97.             border: 1px solid #ebebeb;

  98.             border-radius: 20px;

  99.             background-color: #f6f6f6;

  100.             font-size: 14px;

  101.             outline: none;

  102.             transition: all 0.3s;

  103.         }

  104. 

  105.         .search-box:focus {

  106.             background-color: #fff;

  107.             border-color: #0084ff;

  108.         }

  109. 

  110.         .search-icon {

  111.             color: #0077e6;

  112.             border-bottom-right-radius: 9999px;

  113.             border-top-right-radius: 9999px;

  114.             position: absolute;

  115.             right: -1px;

  116. 

  117.             background: transparent;

  118.             border-bottom-left-radius: 0;

  119.             border-color: transparent;

  120.             border-top-left-radius: 0;

  121.             margin-left: 12px;

  122.             padding: 0 12px;

  123. 

  124.             cursor: pointer;

  125.             display: inline-block;

  126.             font-size: 14px;

  127.             line-height: 32px;

  128.         }

  129. 

  130.         .nav-actions {

  131.             display: flex;

  132.             align-items: center;

  133.         }

  134. 

  135.         .nav-button {

  136.             background-color: #0084ff;

  137.             color: white;

  138.             border: none;

  139.             border-radius: 4px;

  140.             padding: 8px 16px;

  141.             font-size: 14px;

  142.             cursor: pointer;

  143.             margin-left: 16px;

  144.             transition: background-color 0.3s;

  145.         }

  146. 

  147.         .nav-button:hover {

  148.             background-color: #0077e6;

  149.         }

  150. 

  151. 

  152.         .user-avatar {

  153.             width: 30px;

  154.             height: 30px;

  155.             border-radius: 50%;

  156.             background-color: #0084ff;

  157.             color: white;

  158.             display: flex;

  159.             align-items: center;

  160.             justify-content: center;

  161.             font-weight: bold;

  162.             margin-left: 16px;

  163.             cursor: pointer;

  164.         }

  165. 

  166.         /* 下拉菜单样式 */

  167.         .dropdown {

  168.             position: relative;

  169.         }

  170. 

  171.         .dropdown-content {

  172.             display: none;

  173.             position: absolute;

  174.             right: 0;

  175.             top: 100%;

  176.             background-color: white;

  177.             min-width: 160px;

  178.             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

  179.             border-radius: 4px;

  180.             z-index: 999999;

  181.             padding: 8px 0;

  182.         }

  183. 

  184.         .dropdown:hover .dropdown-content {

  185.             display: block;

  186.         }

  187. 

  188.         .dropdown-item {

  189.             padding: 10px 16px;

  190.             text-decoration: none;

  191.             display: block;

  192.             color: #121212;

  193.             font-size: 14px;

  194.             transition: background-color 0.3s;

  195.         }

  196. 

  197.         .dropdown-item:hover {

  198.             background-color: #f6f6f6;

  199.         }

  200. 

  201.         /* 移动端菜单按钮 */

  202.         .menu-toggle {

  203.             display: none;

  204.             background: none;

  205.             border: none;

  206.             font-size: 20px;

  207.             cursor: pointer;

  208.             color: #8590a6;

  209.             margin-right: 10px;

  210.         }

  211. 

  212.         /* 响应式设计 - 平板端 */

  213.         @media (max-width: 1024px) {

  214.             .search-container {

  215.                 flex: 0 1 300px;

  216.             }

  217. 

  218.             .nav-item {

  219.                 margin-right: 15px;

  220.             }

  221.         }

  222. 

  223.         /* 响应式设计 - 移动端 */

  224.         @media (max-width: 768px) {

  225.             .menu-toggle {

  226.                 display: block;

  227.             }

  228. 

  229.             .nav-menu {

  230.                 display: none;

  231.                 position: absolute;

  232.                 top: 100%;

  233.                 left: 0;

  234.                 right: 0;

  235.                 background-color: white;

  236.                 flex-direction: column;

  237.                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  238.                 z-index: 1001;

  239.                 padding: 10px 0;

  240.             }

  241. 

  242.             .nav-menu.active {

  243.                 display: flex;

  244.             }

  245. 

  246.             .nav-item {

  247.                 margin: 0;

  248.                 width: 100%;

  249.             }

  250. 

  251.             .nav-link {

  252.                 padding: 12px 16px;

  253.                 width: 100%;

  254.                 display: block;

  255.                 border-bottom: 1px solid #f0f0f0;

  256.             }

  257. 

  258.             .nav-link:last-child {

  259.                 border-bottom: none;

  260.             }

  261. 

  262.             .search-container {

  263.                 flex: 1;

  264.                 margin-right: 10px;

  265.                 order: 3;

  266.             }

  267. 

  268.             .nav-logo {

  269.                 order: 2;

  270.                 /* margin-right: 0; */

  271.                 margin: 0 10px;

  272.                 flex: 0 0 auto;

  273.             }

  274. 

  275.             .menu-toggle {

  276.                 order: 1;

  277.             }

  278. 

  279.             .nav-actions {

  280.                 display: none;

  281.             }

  282. 

  283.             .highlight-bar {

  284.                 display: none;

  285.             }

  286.         }

  287. 

  288.         /* 响应式设计 - 小屏幕移动端 */

  289.         @media (max-width: 480px) {

  290.             .navbar {

  291.                 padding: 0 10px;

  292.             }

  293. 

  294.             .nav-logo a {

  295.                 font-size: 20px;

  296.             }

  297. 

  298. 

  299. 

  300.             .search-container {

  301.                 margin-right: 5px;

  302.             }

  303.         }

四，点击active状态js代码标记
  1. document.addEventListener('DOMContentLoaded', function () {

  2.             // 获取元素

  3.             const navLinks = document.querySelectorAll('.nav-link');

  4.             const highlightBar = document.querySelector('.highlight-bar');

  5.             const menuToggle = document.querySelector('.menu-toggle');

  6.             const navMenu = document.querySelector('.nav-menu');

  7.             const navContainer = document.querySelector('.nav-container');

  8. 

  9.             // 防抖函数，优化窗口大小改变时的性能

  10.             function debounce(func, wait) {

  11.                 let timeout;

  12.                 return function () {

  13.                     const context = this;

  14.                     const args = arguments;

  15.                     clearTimeout(timeout);

  16.                     timeout = setTimeout(() => {

  17.                         func.apply(context, args);

  18.                     }, wait);

  19.                 };

  20.             }

  21. 

  22.             // 初始化高亮条位置

  23.             function initHighlightBar() {

  24.                 const activeLink = document.querySelector('.nav-link.active');

  25.                 if (activeLink && window.innerWidth > 768) {

  26.                     moveHighlightBar(activeLink);

  27.                 } else {

  28.                     highlightBar.style.display = 'none';

  29.                 }

  30.             }

  31. 

  32.             // 移动高亮条到指定元素

  33.             function moveHighlightBar(targetElement) {

  34.                 if (window.innerWidth <= 768) {

  35.                     highlightBar.style.display = 'none';

  36.                     return;

  37.                 }

  38. 

  39.                 highlightBar.style.display = 'block';

  40. 

  41.                 const linkRect = targetElement.getBoundingClientRect();

  42.                 const containerRect = navContainer.getBoundingClientRect();

  43. 

  44.                 highlightBar.style.width = linkRect.width + 'px';

  45.                 highlightBar.style.left = (linkRect.left - containerRect.left) + 'px';

  46. 

  47.                 // 移除所有active类

  48.                 navLinks.forEach(link => {

  49.                     link.classList.remove('active');

  50.                 });

  51. 

  52.                 // 添加active类到当前元素

  53.                 targetElement.classList.add('active');

  54.             }

  55. 

  56.             // 为每个导航链接添加点击事件

  57.             navLinks.forEach(link => {

  58.                 link.addEventListener('click', function (e) {

  59.                     e.preventDefault();

  60.                     moveHighlightBar(this);

  61. 

  62.                     // 在移动端点击后关闭菜单

  63.                     if (window.innerWidth <= 768) {

  64.                         navMenu.classList.remove('active');

  65.                     }

  66.                 });

  67.             });

  68. 

  69.             // 菜单切换按钮事件

  70.             menuToggle.addEventListener('click', function () {

  71.                 navMenu.classList.toggle('active');

  72.             });

  73. 

  74.             // 窗口大小改变时重新定位高亮条

  75.             window.addEventListener('resize', debounce(function () {

  76.                 initHighlightBar();

  77.             }, 100));

  78. 

  79.             // 点击页面其他区域关闭移动端菜单

  80.             document.addEventListener('click', function (e) {

  81.                 if (window.innerWidth <= 768 &&

  82.                     !navMenu.contains(e.target) &&

  83.                     !menuToggle.contains(e.target) &&

  84.                     navMenu.classList.contains('active')) {

  85.                     navMenu.classList.remove('active');

  86.                 }

  87.             });

  88. 

  89.             // 初始化

  90.             initHighlightBar();

  91.         });


返回顶部

    • 提示