用css html js 制作有下划线悬停效果的导航条菜单cid1039-网页前端代码设计

作者code

 

html and css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
  7. <style>
  10. * {
  11. box-sizing: border-box;
  12. }
  13. body {
  14. text-align: center;
  15. display: flex;
  16. height: 100vh;
  17. width: 100%;
  18. justify-content: center;
  19. align-items: center;
  20. padding: 0 20px;
  21. background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/debut_light.png");
  22. }
  23. .nav {
  24. display: inline-flex;
  25. position: relative;
  26. overflow: hidden;
  27. max-width: 100%;
  28. background-color: #fff;
  29. padding: 0 20px;
  30. border-radius: 40px;
  31. box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
  32. }
  33. .nav-item {
  34. color: #83818c;
  35. padding: 20px;
  36. text-decoration: none;
  37. transition: 0.3s;
  38. margin: 0 6px;
  39. z-index: 1;
  40. font-family: 'Roboto Condensed', sans-serif;
  41. font-weight: 500;
  42. position: relative;
  43. }
  44. .nav-item:before {
  45. content: "";
  46. position: absolute;
  47. bottom: -6px;
  48. left: 0;
  49. width: 100%;
  50. height: 5px;
  51. background-color: #dfe2ea;
  52. border-radius: 8px 8px 0 0;
  53. opacity: 0;
  54. transition: 0.3s;
  55. }
  56. .nav-item:not(.is-active):hover:before {
  57. opacity: 1;
  58. bottom: 0;
  59. }
  60. .nav-item:not(.is-active):hover {
  61. color: #333;
  62. }
  63. .nav-indicator {
  64. position: absolute;
  65. left: 0;
  66. bottom: 0;
  67. height: 4px;
  68. transition: 0.4s;
  69. height: 5px;
  70. z-index: 1;
  71. border-radius: 8px 8px 0 0;
  72. }
  73. @media (max-width: 580px) {
  74. .nav {
  75. overflow: auto;
  76. }
  77. }
  79. </style>
  80. </head>
  81. <body>
  82. <nav class="nav">
  83. <a href="#" class="nav-item is-active" active-color="orange">HOME</a>
  84. <a href="#" class="nav-item" active-color="green">CONTACT</a>
  85. <a href="#" class="nav-item" active-color="blue">ABOUT</a>
  86. <a href="#" class="nav-item" active-color="red">LOACATIONS</a>
  87. <a href="#" class="nav-item" active-color="rebeccapurple">TESTIMONIALS</a>
  88. <span class="nav-indicator"></span>
  89. </nav>
  90. <script src="snake.js">
  92. </script>
  93. </body>
  94. </html>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
     <style>
     
      
 * {
   box-sizing: border-box;
}
 body {
   text-align: center;
   display: flex;
   height: 100vh;
   width: 100%;
   justify-content: center;
   align-items: center;
   padding: 0 20px;
   background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/debut_light.png");
}
 .nav {
   display: inline-flex;
   position: relative;
   overflow: hidden;
   max-width: 100%;
   background-color: #fff;
   padding: 0 20px;
   border-radius: 40px;
   box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
}
 .nav-item {
   color: #83818c;
   padding: 20px;
   text-decoration: none;
   transition: 0.3s;
   margin: 0 6px;
   z-index: 1;
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 500;
   position: relative;
}
 .nav-item:before {
   content: "";
   position: absolute;
   bottom: -6px;
   left: 0;
   width: 100%;
   height: 5px;
   background-color: #dfe2ea;
   border-radius: 8px 8px 0 0;
   opacity: 0;
   transition: 0.3s;
}
 .nav-item:not(.is-active):hover:before {
   opacity: 1;
   bottom: 0;
}
 .nav-item:not(.is-active):hover {
   color: #333;
}
 .nav-indicator {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 4px;
   transition: 0.4s;
   height: 5px;
   z-index: 1;
   border-radius: 8px 8px 0 0;
}
 @media (max-width: 580px) {
   .nav {
     overflow: auto;
  }
}
 
     </style>
 </head>
 <body>
     <nav class="nav">
  <a href="#" class="nav-item is-active" active-color="orange">HOME</a>
  <a href="#" class="nav-item" active-color="green">CONTACT</a>
  <a href="#" class="nav-item" active-color="blue">ABOUT</a>
  <a href="#" class="nav-item" active-color="red">LOACATIONS</a>
  <a href="#" class="nav-item" active-color="rebeccapurple">TESTIMONIALS</a>
  <span class="nav-indicator"></span>
</nav>
<script src="snake.js">
   
    </script>
 </body>
 </html>

js

  1. "use strict";
  3. var indicator = document.querySelector('.nav-indicator');
  4. var items = document.querySelectorAll('.nav-item');
  6. function handleIndicator(el) {
  7. items.forEach(function (item) {
  8. item.classList.remove('is-active');
  9. item.removeAttribute('style');
  10. });
  11. indicator.style.width = "".concat(el.offsetWidth, "px");
  12. indicator.style.left = "".concat(el.offsetLeft, "px");
  13. indicator.style.backgroundColor = el.getAttribute('active-color');
  14. el.classList.add('is-active');
  15. el.style.color = el.getAttribute('active-color');
  16. }
  18. items.forEach(function (item, index) {
  19. item.addEventListener('click', function (e) {
  20. handleIndicator(e.target);
  21. });
  22. item.classList.contains('is-active') && handleIndicator(item);
  23. });
    "use strict";

var indicator = document.querySelector('.nav-indicator');
var items = document.querySelectorAll('.nav-item');

function handleIndicator(el) {
  items.forEach(function (item) {
    item.classList.remove('is-active');
    item.removeAttribute('style');
  });
  indicator.style.width = "".concat(el.offsetWidth, "px");
  indicator.style.left = "".concat(el.offsetLeft, "px");
  indicator.style.backgroundColor = el.getAttribute('active-color');
  el.classList.add('is-active');
  el.style.color = el.getAttribute('active-color');
}

items.forEach(function (item, index) {
  item.addEventListener('click', function (e) {
    handleIndicator(e.target);
  });
  item.classList.contains('is-active') && handleIndicator(item);
});

在线演示 让链接同时具备两种打开方式

获取源码: Snakkk
下载数:103人次, 文件大小: 1.5 KB, 上传日期: 2020年-11 月-26日

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

qrcode_for_gh_6ea2c28a1709_258 (1)

4,450 人查阅

类似文章