effect bar filling css in menu [duplicate]

Question

effect bar filling css in menu [duplicate]

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

people should recreate the effect of the menu on that site: link however I am not getting it, I was able to create the bar and make the bar grow but it grows over the menu, capping the writing ....... the way I tried it is doing a class with 0 width then on hover pick up width total and add the transition, I tried to do with the background of the menu but it does not work because as originally it needs to have 0 of width, then the menu is without initial width ..... I am beginner, can someone help me? follow the css code

.hover-menu:after{
 position: absolute;
 top:0px;
 border-radius: 0 15px 0 0;
 left:0%;
 width:0;
 height:50px;
 background:#fb3c03;
 display:block;
 content:"";
 transition: width 0.5s ease-in-out;
}
.hover-menu:hover:after{
 width:100%;
}

I got this code from a project and it uses the empty content ... if I remove this empty content does not work .. in css the hover class menu is in my "a"

css menu style

asked by anonymous 26.06.2018 / 22:31

2 answers

1

Simply put z-index:-1 into ::after it appears next to the text.

See the example. (I left the comment in the code)

.hover-menu:after{
 position: absolute;
 top:0px;
 border-radius: 0 15px 0 0;
 left:0%;
 width:0;
 height:50px;
 background:#fb3c03;
 display:block;
 content:"";
 transition: width 0.5s ease-in-out;
transition-timing-function: cubic-bezier(0.52,1.64,.37,.66); /*animação para ficar igual a do site do exemplo */
 z-index: -1;  /* coloque z-index aqui */
}
.hover-menu:hover:after{
 width:100%;
}

<a href="#" class="hover-menu">link</a>

26.06.2018 / 23:15

Error accessing cori api Count Number of Letters in a String - Delphi

score 1 · Accepted Answer

You have to set z-index: -1 in ::after and z-index: 1 in the element. Example:

body{
   background: #ddd;
}

ul, li{
   margin: 0;
   padding: 0;
}

li{
   list-style: none;
   padding: 10px;
   display: inline-block;
   background: #777;
   line-height: 1em;
   margin: 0 5px;
   cursor: pointer;
   color: #fff;
   position: relative;
   z-index: 1;
}

li::after{
   content: '';
   display: inline-block;
   width: 0;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: orange;
   z-index: -1;
   transition: width 0.5s ease-in-out;
}

li:hover::after{
   width: 100%;
}

<ul>
   <li>Menu 1</li>
   <li>Menu 2</li>
</ul>