I am trying to create sliding horizontal line on click of hyperlinks. Please have a look at: http://codepen.io/anon/pen/JdEPPb
The HTML is:
* {
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;
text-decoration: none;
color: #333;
}
.one:active ~ hr {
margin-left: 0%;
}
.two:active ~ hr {
margin-left: 25%;
}
.three:active ~ hr {
margin-left: 50%;
}
.four:active ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: 0.3s ease-in-out;
}
<div class="container">
<ul>
<li class="one"><a href="#">Uno</a></li><!--
--><li class="two"><a href="#">Dos</a></li><!--
--><li class="three"><a href="#">Tres</a></li><!--
--><li class="four"><a href="#">Quatro</a></li>
<hr />
</ul>
</div>
There is no javascript code.
When I click Two, I want the underline to move under Two but currently its not moving. I need to hold for longer for it to move and when I release the mouse left button, it falls back to One
In the horizontal text we use text-underline-position: under; to put the underline below all the descenders. In the text with a vertical writing-mode set, we can then use values of left or right to make the underline appear on the left or right of the text as required.
To underline text, select and highlight the text first. Then hold down Ctrl (the control key) on the keyboard and then press the U on the keyboard.
The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration ) from its original position.
:active
only fires while you hold down the mouse button on the element - i.e. while you are actively clicking on the element.
You can use :target
instead of :active
.
The :target
pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
By giving values to the href
attribute of the links and id
s of the li
elements we can :target
the li
that has been clicked on:
* {
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;
text-decoration: none;
color: #333;
}
#uno:target ~ hr {
margin-left: 0%;
}
#dos:target ~ hr {
margin-left: 25%;
}
#tres:target ~ hr {
margin-left: 50%;
}
#quatro:target ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: 0.3s ease-in-out;
}
<div class="container">
<ul>
<li class="one" id="uno"><a href="#uno">Uno</a></li><!--
--><li class="two" id="dos"><a href="#dos">Dos</a></li><!--
--><li class="three" id="tres"><a href="#tres">Tres</a></li><!--
--><li class="four" id="quatro"><a href="#quatro">Quatro</a></li>
<hr />
</ul>
</div>
It moves while your mouse is still down. Your problem is that :active
selector is only activated while the element is active, typically when the mouse is pressed.
You need to add the class .active
instead of the :active
selector. So you'd have:
.one.active ~ hr {
margin-left: 0%;
}
.two.active ~ hr {
margin-left: 25%;
}
.three.active ~ hr {
margin-left: 50%;
}
.four.active ~ hr {
margin-left: 75%;
}
And add some functionality:
var elems = document.querySelectorAll(".one,.two,.three,.four");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click",function(e){
if(document.querySelector(".active")){
document.querySelector(".active").classList.remove("active");
}
e.currentTarget.classList.add("active");
});
}
A pen: http://codepen.io/vandervals/pen/wagwBQ
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With