jquery动画填充菜单上的位置“固定”

Question

我正在使用 jquery 代码为我的菜单设置动画。 我的菜单使用垂直 li。 当鼠标悬停在 li 上时，将添加 20 px 的填充，当鼠标移出时，填充设置为其原始值。 它工作正常。

但我有一个问题，当我将菜单设置为“固定”位置时，我的动画中有一个错误，当鼠标悬停 l)i 时（例如使用“infos pratiques”，我的菜单会颤抖。 只有当我的菜单设置为固定和绝对时才会出现问题。

任何人都可以帮助我吗？

这里有一个 jsfiddle 链接来查看它的实际效果：

http://jsfiddle.net/F5643/2/

这是我的html：

<div id="menu_left">
    <nav id="menu_1">
          <ul>
            <li><a href="#">• Le lieu</a></li>
            <li><a href="#">• Le Projet</a></li>
            <li><a href="#">• Evenements</a></li>
            <li><a href="#">• Residents</a></li>
            <li><a href="#">• Ateliers</a></li>
            <li><a href="#">• Infos Pratiques</a></li>
        </ul>

    </nav>

    <nav id="menu_2">
          <ul>
            <li><a href="#">• Bar | Restaurant</a></li>
            <li><a href="#">• Privatiser le Lieu</a></li>
            <li><a href="#">• Soutenir le Projet</a></li>
            <li><a href="#">• Covoiturage</a></li>
        </ul>

    </nav>
    </div>

我的 CSS ：

#menu_left {
    opacity: 0.5;
    font-family: 't-star_mono_roundregular';
    color: #FFF;
    text-decoration: none;
    position: fixed;
    background-color:red;
}

#menu_1{margin-top: 10%}

#menu_1 li {margin-bottom: 5px;display:block}
#menu_1 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:20px;
}

#menu_1 li a:hover{
  background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

#menu_2{margin-top: 40px}
#menu_2 li {margin-bottom: 5px;display:block}
#menu_2 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:15px;
}
#menu_2 li a:hover{background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

还有我的 JS：

function MIn()
{
    jQuery(this).animate({paddingLeft:"20px"},"fast");
}
function MOut()
{
    jQuery(this).animate({paddingLeft:"10px"},"fast");
}   

$('li a').hover(MIn, MOut);

非常感谢您的帮助，

Answer 1

只需为menu_left div设置最小宽度

#menu_left div
{
min-width: 300px;
}

这是因为<a> 标记中的文本过长。当您将postion:fixed 设置为主要menu_left div 时会发生这种情况

Answer 2

你可以给ul一个padding-right你想要的任何东西，我将它设置为0%以保持它相同的宽度。
然后给#menu_1 li a 一个white-space: pre 使其扩展到边缘。

Here's a fiddle。我把所有代码都放在了底部，方便大家查找。

更好的是，如果您还想有额外的填充，您可以为#menu_1 添加一个max-width。这是一个小提琴：http://jsfiddle.net/793Jv/1/

Answer 3

#menu_1 的上边距为 10%。当设置为百分比时，边距基于包含元素的宽度。因此，当 20px 添加到 li 的宽度时，它会更改 #menu_1 的宽度，然后会更改填充的大小。如果您将其更改为以下内容，它将按预期工作：

#menu_1 {
    margin-top: 22px;
}

您可以使用固定宽度来解决此问题，但这意味着如果您获得更长的菜单名称，则必须再次更改它。我已经更新了小提琴以进行一些更改。您不需要 javascript，如果您将转换置于元素的默认状态 [即不是 :hover 位]，则转换将在悬停后转换回其原始状态。

http://jsfiddle.net/F5643/12/

Answer 4

只需将 width:250px 添加到 menu_left css：

#menu_left {
    opacity: 0.5;
    font-family: 't-star_mono_roundregular';
    color: #FFF;
    text-decoration: none;
    position: fixed;
    top:0;
    left:0;
    background-color:red;
    **width:250px;**
}

还有你编辑的小提琴：http://jsfiddle.net/piyushkmr/F5643/8/