如何使用CSS格式化导航栏的下划线 [英] How to format an underline for a navigation bar using CSS
本文介绍了如何使用CSS格式化导航栏的下划线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我将鼠标悬停在单词上时，我想出了如何在导航栏的下划线.我正在尝试使其与该页面上的格式相同，以便使下划线保持在那里.我不知道这一点.希望有帮助. 谢谢:)
I figured out how to make an underline under a part of my navigation bar when I am hovering over the word. I am trying to make it in the same format for when I am on that page so that the underline stays there. I can't figure this out. Would love some help. Thanks :)
*{
margin:0;
padding:0;
border:0;
}
.topnav {
background-color: purple;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 3px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Change
</title>
</head>
<body>
<div class="topnav">
<a class="active" href="index.html">Home</a>
<a href="#news">DontUse</a>
<a href="#contact">DontUse</a>
<a href="about.html">About</a>
</div>
<p>
This is the home page
</p>
</body>
</html>
推荐答案
在这里，您可以使用jquery.
还制作了一个新的活动菜单类.topnav a.active-menu:before
Here you go, using jquery.
Also made a new active-menu class .topnav a.active-menu:before
$("a").click(function(){
$("a.active-menu").removeClass("active-menu");
$(this).addClass("active-menu");
});
*{
margin:0;
padding:0;
border:0;
}
.topnav {
background-color: purple;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 3px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 3px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Change
</title>
</head>
<body>
<div class="topnav" id="topnav">
<a class="active-menu" href="index.html">Home</a>
<a class="link" href="#news">DontUse</a>
<a class="link" href="#contact">DontUse</a>
<a class="link" href="about.html">About</a>
</div>
<p>
This is the home page
</p>
</body>
</html>
这篇关于如何使用CSS格式化导航栏的下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
