How to make this hover effect?

Navigation
6

The hover effect of this site's menu: link

Is CSS3 pure? How to do something similar?

    
asked by anonymous 24.10.2016 / 22:00

2 answers

11

This is done with CSS. 

#menu .item4 a {
    border-top: solid 4px #2d8444;
    background: #2d8444;
    height: 0;
    display: block;
    margin-top: 0;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    padding: 0 21px;
}

#menu .item4 a:hover {
    height: 34px;
    color: #fff;
}

a {
    text-decoration: none;
    color: black;
}

a span {
	line-height: 30px;
    font-size: 20px;
}

li {
    list-style-type: none;
}

#menu li {
    list-style: none;
    margin: 0;
    background-color: #f0f0f0;
    height: 36px;
    width: 120px;
    font-family: "Arial", sans-serif;
    justify-content: "space-between";
}
<div id="menu">
    <ul>
        <li class="item4"><a href="/esportes"><span>Esportes</span></a></li>
    </ul>
</div>

The trick is to have the element a with height zero and change the value with :hover : 

#menu .item4 a:hover{
    height:34px;
    color:#fff;
}

the a element changes the height with animation having the background color already defined earlier as in the example above.

The colored part that is exposed when height is 0 is the border: 

border-top:solid 4px #2d8444;

In this example (here: link ) you can see the bottom border (in red) and the animation becomes even clearer. / p>     

24.10.2016 / 22:07
4

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #f0f0f0;
  height: 36px;
  font-family: "Arial", sans-serif;
justify-content: "space-between";
}

.menu li {
  height: 0; 
  border-top: 3px solid;
  transition: all .2s ease-in-out;
width: 100%;
}

.menu li:nth-child(1) {
  border-color: red;
  background-color: red;
}

.menu li:nth-child(2) {
  border-color: yellow;
  background-color: yellow;
}

.menu li:nth-child(3) {
  border-color: green;
  background-color: green;
}

.menu li:nth-child(4) {
  border-color: blue;
  background-color: blue;
}

.menu li:nth-child(5) {
  border-color: purple;
  background-color: purple;
}

.menu li:hover {
  height: 34px;

}

.menu li:hover a {
  color: #fff;
}

.menu li a {
  padding: 0 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  text-transform: uppercase;
  text-decoration: none;
  color: #666;
  transition: all .2s ease-in-out;
  border-left: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
<ul class="menu">
  <li><a href="#"><span>item a</span></a></li>
  <li><a href="#"><span>item b</span></a></li>
  <li><a href="#"><span>item c</span></a></li>
  <li><a href="#"><span>item d</span></a></li>
  <li><a href="#"><span>item e</span></a></li>
</ul>
    
24.10.2016 / 23:02
Removing a specific space in a string Generate sequence in R