CSS Jitter in Hover menu

Navigation
0

I have programmed a menu with 2 hovers (class), one that makes the text rise and another that makes the text bold.

But when I put the mouse over the words the others on the side move, this is known as CSS Jitter, but I can not fix it.

HTML 

<div id="header">
   <ul>
     <li id="agenda-link"><a class="float" class="scroll" href="#agenda">Agenda</a></li>
     <li id="musicas-link"><a class="float" class="scroll" href="#musicas">Músicas</a></li>
     <li id="compre-link"><a class="float" class="scroll" href="#compre">Compre</a></li>
     <li id="contato-link"><a class="float" class="scroll" href="#contato">Contato</a></li>   
  </ul>
</div>  <!-- END header -->

CSS 

#header {
    font: 28px 'Open Sans', sans-serif;
    font-weight: 300;
    width: 80%;
    margin: 0 auto;
    height:90px;
}
#header ul {
    width: 65%;
    list-style:none;
    position:relative;
    top:40%;
}
#header li {
    display:inline;
    padding-left:8%;
}
#header li a {
    text-decoration:none;
    color:#cebc85;
}
#header li a:hover {
    color:#cebc85;
    font-weight:400;
}

/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

Demo: link

    
asked by anonymous 15.07.2014 / 02:27

1 answer

1

I noticed the problem Internet Explorer and Safari only . Your code seems to work in Chrome and Firefox, but there are some issues as below:

To define two classes for an element, you are doing 

<a class="float" class="scroll" href="#agenda">Agenda</a>

Change to 

<a class="float scroll" href="#agenda">Agenda</a>

The unwanted effect occurs, because the width of% w / o% is not set and the width changes according to the text, there is no way to avoid this without setting a width. To remove this unwanted effect, I suggest the following changes:

Change your CSS from 

#header ul {
    width: 65%;
    list-style:none;
    position:relative;
    top:40%;
}

#header li {
    display:inline;
    padding-left:8%;
}

To 

 #header ul {
    width: 80%;
    display: table;
    table-layout: fixed;
    list-style:none;
    position:relative;
    top:40%;
}

#header ul li {
    display: table-cell;
    width: auto;
    text-align: center;
    padding-left:8%;
}

Demo: link

    
15.07.2014 / 02:53
Android Game Development API [closed] Optimize NSPredicate with MagicalRecord