I am trying to make a simple navigation menu consisting of links with an animating underline, as demonstrated by Tobias Ahlin http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
I get this to work, however I can't figure out how to have the underline visible immediately if the list element is active.
Any help is welcome, thanks a lot!
Fiddle: https://jsfiddle.net/131d8q1v/5/
HTML:
<div class="container">
<ul>
<li class="active">About</li>
<li>Contact</li>
</ul>
</div>
CSS:
ul {
list-style-type:none;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: -2px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Add this rule:
li.active a:before,
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul {
list-style-type: none;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: -2px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
li.active a:before,
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="container">
<ul>
<li class="active">About</li>
<li>Contact</li>
</ul>
</div>
Related
I tried to use this guide to animate my links' undeline.
However, for the vertical text it doesn't really work, see my Codepen here
What can I change (if possible) to have the vertical text underlined properly with this animation?
HTML:
<div class="hlinks">
ABOUT —
CONTACT
</div>
CSS:
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Again, here's my sample: https://codepen.io/alanvkarlik/pen/QmJQev
You need to adjust your CSS for the .hlinks a elements so that they behave slightly differently from the regular a elements, especially in position of underline and scaling along a different axis.
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.hlinks a:before {
content: "";
position: absolute;
height: 100%;
width: 1px;
top: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.hlinks a:hover:before {
visibility: visible;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<div class="hlinks">
ABOUT —
CONTACT
</div>
ABOUT —
CONTACT
You just need to make some adjustments in positioning of the pseudo-element and a few minor stylistic changes.
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 20%;
top: 20px;
display: inline;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.hlinks a::before {
width: 1px;
height: 0;
top: 0;
}
.hlinks a:hover:before {
visibility: visible;
height: 100%;
<div class="hlinks">
ABOUT —
CONTACT
</div>
ABOUT —
CONTACT
You just need to flip your axis since your text is vertical instead of horizontal. Change all instances of "scaleX" to "scaleY", and then then flip the height and width on a:before. That should do it.
I'm really new to HTML and CSS. I have a navbar which underlines the menu item you hover with a fade in, fade out-effect from the middle,
but how can I keep an active menu item underlined with the same style?
I'm also using Typo3 / Fluid which creates me the html code and assigns the "active" class to the active menu item.
This is how it looks like so far: https://jsfiddle.net/wr5w09r0/
css
div#top_nav{
text-align: center;
}
div#top_nav li{
display: inline;
padding: 15px;
}
div#top_nav a {
display: inline-block;
position: relative;
}
div#top_nav a:hover{
color: orange;
}
div#top_nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: orange;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
}
div#top_nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active {
color: orange;
}
Hope this will help you. I have added this simple element.
div#top_nav a:hover:before , div#top_nav a.active:before
a {
text-decoration: none;
}
div#top_nav{
text-align: center;
}
div#top_nav li{
display: inline;
padding: 15px;
}
div#top_nav a {
display: inline-block;
position: relative;
}
div#top_nav a:hover{
color: orange;
}
div#top_nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: orange;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
}
div#top_nav a:hover:before , div#top_nav a.active:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.active {
color: orange;
}
<div id="top_nav">
<ul>
<li class="mainMenu-itemLevel1">
seite1</li>
<li class="mainMenu-itemLevel1">
seite2
</li><li class="mainMenu-itemLevel1">
seite3</li>
<li class="mainMenu-itemLevel1">
seite4</li>
<li class="mainMenu-itemLevel1">
Seite5 lang Hover</li>
</ul>
</div>
Hope this will help you.
You need to use javascript to do this.
Your javascript would add a class, like active to the relevant menu item, and you can then use your css to style it appropriately.
After adding the active class to the element, to apply your orange style use this:
div#top_nav.active a{
color: orange;
}
Note the addition of .active which selects only active items, and the omission of :hover on the link, since you no longer care about hover.
You may find the , css operator useful here, for applying the same styles to different selectors (active, and hover) as shown in my example below:
var items = document.getElementsByClassName('item');
var activeClassName = 'active';
function unselectItems() {
for (var i = 0; i < items.length; i++) {
items[i].classList.remove(activeClassName);
}
}
function selectItem(item) {
unselectItems();
item.classList.add(activeClassName);
}
function onItemClick(event) {
selectItem(event.target);
}
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', onItemClick);
}
span {
border: 1px solid black;
padding: 5px;
}
span:hover, span.active {
color: white;
background-color: black;
}
<nav>
<span class="item">Home</span>
<span class="item">About</span>
<span class="item">Contact</span>
<nav>
I want to make the sliding underline to run from left to right when i hover, and also set up the width of the line from the 1st letter to the last, and not bigger. How can i do that?
.nav-bar a:hover {
color: #000;
}
.nav-bar a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-bar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="nav-bar">
<ul>
<li>RETROSPECTIVE SHOW /2006/</li>
<li>TEXTS</li>
<li>BIBLOGRAPHY</li>
</ul>
</div>
You can use display: inline-block; to keep the fixed width. And for underlining you can use pseudo-classes like :before and :after.
Have a look at the snippet below:
/* LEFT TO RIGHT */
.sliding-left-to-right {
display: inline-block;
margin: 0;
}
.sliding-left-to-right:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-left-to-right:hover:after {
width: 100%;
background: blue;
}
/* LAYOUT STYLING */
body {
margin: 20px;
}
a {
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: blue;
}
a:hover {
color: blue;
text-decoration: none;
cursor: pointer;
}
<a class="sliding-left-to-right">Underline – Left to Right</a>
Hope this helps!
trying to display line on the bottom of navigation anchor with the help of before,after i try a lot to solve my problem but don't any solution about this problem. i want to add bottom line with the help of css transform and transition using after pasudo classes
<html>
<head>
<style>
body,ul,li,a,nav{
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding:10px 10px;
color: #fff;
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 20%;
left: 0;
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}
</style>
</head>
<body>
<nav class="header-menu">
<ul class="menu-items">
<li>Home</li>
<li>Animal</li>
<li>Birds</li>
<li>Sports</li>
<li>Address</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
Add position: relative to .header-menu li > a or to .menu-items a
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table--group, table-row, table-column, table-cell, and table-caption
elements is undefined.
then change top: 50%; in .header-menu li > a::after to top: 100%;
Live DEMO
body,
ul,
li,
a,
nav {
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding: 10px 10px;
color: #fff;
position: relative/*this will wrap pseudo elements*/
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 100%; /*because we want it to be at the bottom of the anchor*/
left: 10px; /*10px because anchor has a padding of 10px*/
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}
<nav class="header-menu">
<ul class="menu-items">
<li>Home
</li>
<li>Animal
</li>
<li>Birds
</li>
<li>Sports
</li>
<li>Address
</li>
<li>News
</li>
</ul>
</nav>
I have made a Menu with transitions in CSS3, but the problem is that the buttons that unfold dissapear when i try to hover over them, because of the transition that is just set on the Mainmenu DIV.
I could use some help!
Here is my jsfiddle: http://jsfiddle.net/7zn2D/
Here is my code:
<div id="mainmenu">
<div id="menu">MENU</div>
<div id="home">HOME</div>
<div id="video">VIDEO</div>
<div id="photos">>PHOTO'S</div>
<div id="calendar">CALENDAR</div>
</div>
#mainmenu {
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
heigth: auto;
width: auto;
}
#mainmenu div {
color: #333333;
text-decoration: none;
font-size: 22px;
font-weight: 500;
position: fixed;
width: 100px;
height: 100px;
top: 400px;
right: -50px;
background: #333333;
text-align: center;
line-height: 100px;
transition: all 1s ease;
transform: rotate(45deg);
}
a {
display: block;
text-decoration: none;
}
#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li a { /*text-indent: -999999px;*/ overflow: hidden; display: block; float: right;}
#menu {
z-index: 5;
}
#home {
z-index: 4;
}
#video {
z-index: 3;
}
#photos {
z-index: 2;
}
#calendar {
z-index: 2;
}
#menu:hover {
background: #FFFFFF;
}
#menu:hover ~ #home {
transition: all 0.3s ease;
transform: rotate(45deg) translate(0px,105px) perspective(350px);
}
#menu:hover ~ #photos {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(0px,210px) perspective(350px);
}
#menu:hover ~ #video {
transition: all 0.3s ease;
transform: rotate(45deg) translate(-105px,0px) perspective(350px);
}
#menu:hover ~ #calendar {
transition: all 0.3s ease;
transition-delay: 0.3s;
transform: rotate(45deg) translate(-210px,0px) perspective(350px);
}
You need to apply the :hover event to the parent, #mainmenu. In order to do that, I made #mainmenu have position:fixed and absolutely positioned the children
#mainmenu {
position:fixed;
top: 300px;
right: -50px;
height:1px; width:1px;
}
#mainmenu div {
position:absolute;
right:0;
color: #333333;
text-decoration: none;
font-size: 22px;
font-weight: 500;
width: 100px;
height: 100px;
background: #333333;
text-align: center;
line-height: 100px;
transition: all 1s ease;
-webkit-transform: rotate(45deg);
}
a {
display: block;
color:white;
text-decoration: none;
transition: all 0.7s ease;
}
#menu:hover {
background: #FFFFFF;
}
#menu:hover a {
color:black;
}
#mainmenu:hover #menu ~ #home {
transition: all 0.3s ease;
-webkit-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
}
#mainmenu:hover #menu ~ #photos {
transition: all 0.3s ease;
transition-delay: 0.3s;
-webkit-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
}
#mainmenu:hover #menu ~ #video {
transition: all 0.3s ease;
-webkit-transform: rotate(45deg) translate(-105px, 0px) perspective(350px);
}
#mainmenu:hover #menu ~ #calendar {
transition: all 0.3s ease;
transition-delay: 0.3s;
-webkit-transform: rotate(45deg) translate(-210px, 0px) perspective(350px);
}
Demo here