How to slide line in css? - html

Question

https://imgur.com/a/V2W5jTZ (If you can't see the image)
When I click on one heading the line should appear, but when I click on another heading I want the line to slide to the next heading.
I have already created the same menu navigator for each heading(page), and I just display line under the page that's open
Ex:
Heading code
<p class="content">
About Us
Position
Commerical Projects
Residential Projects
</p>
After setting all the same css, i have used hr in this way:
hr{
position: absolute;
top: 100px;
right: 168px;
width: 240px;
border-color: red;
}

Answer 1

p a {
font-family: sans-serif;
text-decoration: none;
color: gray;
position: relative;
margin: 10px 0;
display: inline-block;
padding: 12px 10px;
}
p a::after {
content: "";
background: blue;
height: 1px;
position: absolute;
bottom: 0;
transition: .16s all 0.025s;
}
p a::after {
left: 100%;
right: 0;
}
p a:hover ~ a::after {
left: 0;
right: 100%;
}
p a:hover::after {
left: 0;
right: 0;
}
<p class="content">
About Us
Position
Commerical Projects
Residential Projects
</p>
try this :)

Answer 2

I'd recommend writing a css class with the desired style which you would apply to an
you will need some java-script to apply the class to the element when clicked but here's an example to get you started
https://www.w3schools.com/howto/howto_js_active_element.asp

Answer 3

You can use pseudo css classes to show underline for a active element(anchor tag).
There are different states of pseudo classes like active, hover, focus etc
Most probably you can use focus class to solve your problem. (active and hover can also be used to handle different scenarios )
Here is an example to solve your problem
a {
text-decoration: none;
}
a:focus {
border-bottom: 1px solid red;
}
also instead of text-decoration: underline; you may use border-bottom: 1px solid red; which is more clear under line.
Here is full css code which may help you to better understand the solution :
/*To hide the default behaviour of <a> tag*/
a {
text-decoration: none;
}
/***By using text-decoration: underline;***/
/* a:active, a:focus, a:hover {
text-decoration: underline;
} */
/***To handle different cases***/
/* a:active, a:focus, a:hover {
border-bottom: 1px solid red;
} */
/***Final solution - to handle your requirement***/
a:focus {
border-bottom: 1px solid red;
}
You can also use the commented code by uncommenting it check different scenarios.

Answer 4

You can check this link for details on how to build it: https://codepen.io/arjunamgain/pen/lGALt
This should be good enough to achieve the desired functionality. Instead of the red background in the css section just use a border rule, like:
border-bottom: 4px solid #d90000;

Answer 5

You can use something like this
$(document).ready(function() {
var $slider = $('nav .slider'),
width = $('nav ul li').width;
$slider.width(width);
});
$(window).resize(function() {
var $slider = $('nav .slider'),
width = $('nav ul li').width,
$isActive = $('nav ul li.isactive'),
isX = $isActive.position().left,
isW = $isActive.width();
$slider.width(width);
$('nav ul li').each(function() {
var x = $(this).position().left,
w = $(this).width();
$(this).on({
mouseenter: function() {
$slider.css({
left: x,
width: w
});
},
mouseleave: function() {
$slider.css({
left: isX,
width: isW
});
}
});
});
}).resize();
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
color: #ea3830;
text-decoration: none;
}
nav {
position: relative;
width: 100%;
max-width: 960px;
min-width: 400px;
height: 50px;
margin: 25px auto;
border-bottom: 3px solid #eee;
text-align:center;
}
nav .slider {
position: absolute;
bottom: 0;
width: 25%;
height: 3px;
box-shadow: 0 3px #ea3830;
transition: all 0.3s ease-in-out;
}
nav ul {
padding: 0;
height: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
nav ul li {
width: 25%;
height: 50px;
flex: 25%;
line-height: 50px;
list-style: none;
}
nav ul li a {
padding: 0 25px;
display: block;
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class='slider'></div>
<ul>
<li class='isactive'>
<a href='#'>Index</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Work</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</nav>

Answer 6

Here you go man try this :)
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">About Us</li><!--
--><li class="two">Position</li><!--
--><li class="three">Commerical Projects</li><!--
--><li class="four">Residential Projects</li>
<hr />
</ul>
</div>