Question

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

但是我有一个问题，当我将菜单设置为位置＆＃34;修复＆＃34;时，我的动画中有一个错误，当鼠标悬停时l）i（例如使用＆＃34; infos pratiques＆＃34;，我的菜单颤抖。问题出在我的菜单设置为固定和绝对时。

任何人都可以帮助我吗？

这里有一个jsfiddle链接，可以看到它的实际效果：

这是我的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。我将所有代码放在底部，以便您轻松找到它。

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

Answer 3

只需将宽度：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/

Answer 4

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

#menu_1 {
    margin-top: 22px;
}

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

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

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

4 个答案: