头部菜单下划线效果

最新推荐文章于 2023-09-06 00:02:10 发布

LILEILEILOVE

最新推荐文章于 2023-09-06 00:02:10 发布

阅读量160

点赞数

分类专栏： JS 文章标签： css3

本文链接：https://blog.csdn.net/LILEILEILOVE/article/details/109698817

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
nav {
  position: relative;
  top: 0.5em;
  margin: 0 auto;
}
nav ul {
  background: rgba(255, 255, 255, 0);
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
}
nav ul li {
  background-color: #000;
  font-size: 16px;
color: #fff;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  margin: 0 0;
  display: inline-block;
  list-style-type: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
nav ul li:hover {
  color: red;
}
.current{
  color: red;
}
nav .indicator {
  pointer-events: none;
  position: fixed;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
    </style>
</head>
<body>
    <nav>
        <ul>
          <li>news</li>
          <li>products</li>
          <li>services</li>
          <li>gallery</li>
          <li>about us</li>
          <li>contact</li>
          <li>jobs</li>
          <li>blog</li>
        </ul>
      </nav>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
      <script>
        $(function() {
  brainbow();
});

var brainbow = function init () {
  /* function stuff */
  var indicate = function indicate ($e, current) {
    var o = $e.offset(),
        h = $e.innerHeight(),
        w = $e.innerWidth(),
        t = (o.top + h +0).toFixed(2),
        l = o.left.toFixed(2),
        c =  "red";
    $(".indicator").css({
      "top": current ? t  + "px" : t + 6 + "px",
      "left": l + "px",
      "width": w + "px",
      "height": current ? "1px" : "2px",
      "background-color": c
    });
  };
  /* event stuff */
  $("nav ul").on("click", "li", function(e) {
    $("nav ul li").each(function(){
      $(this).removeClass("current");
    });
    $(this).addClass("current");
  });
  $("nav ul").on("mouseenter", "li", function(e) {
    indicate( $(this), false);
  });
  $("nav ul").on("mouseleave", "li", function(e) {
    indicate( $("li.current"), true);
  });
  $(window).on("resize", function() {
    indicate( $("li.current"), true);
  });
  /* init stuff */
  var indicator = $("<div>").addClass("indicator");
  $("nav").prepend(indicator);
  $("nav ul li").each(function(){
    $(this).data({"color": $(this).css("color")});
  }).first().addClass("current");
  indicate($("nav ul li.current"), true);
};

      </script>
</body>
</html>

在VUE项目中

要安装jQuery

cnpm install jquery --save
建home.vue文件

<template>
<div>
    <nav>
        <ul>
          <li>news</li>
          <li>products</li>
          <li>services</li>
          <li>gallery</li>
          <li>about us</li>
          <li>contact</li>
          <li>jobs</li>
          <li

最低0.47元/天解锁文章

LILEILEILOVE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
头部菜单下划线效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>nav { position: relative
复制链接

扫一扫

专栏目录