0

示例：http: //jsfiddle.net/sUm2W/

这个有点难以解释，所以我已经包含了我正在使用的所有代码。

当页面加载时 li 元素显示，直到我将鼠标悬停在它们上方，此时它们消失并且菜单完全按照我的意愿工作。是什么让它们可见？我尝试将 li 宽度设置为 0px，但这也不起作用。

另外，为什么 UL 的左侧有一个 40px 的边框？我还没有做任何边框，为了让文本显示在最左边，我需要将 li 边距设置为 -40px。

无论如何，这是代码......

<style type="text/css">
body {
background-color: #000;
margin:0;
text-align:center;
min-width:1080px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font:Arial, Helvetica, sans-serif; color:#FFF;
}
ul#navigation {
position: fixed;
z-index:9999;
background-color:#999;
margin:0;
width:0px;
}
ul#navigation li {
text-align:left;
list-style:none;
}

</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script>

$(function() {

            $("ul#navigation").hover(function(){
                    $('ul#navigation').stop().animate({'width':'150px'},200);
                },
                function () {
                    $('ul#navigation').stop().animate({'width':'0px'},200);
                }
            );
        });

</script>
</head>
<body>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Pics</li>
<li>Stuff</li>
</ul>
</body>

谢谢 ：）

4

2 回答 2

0

不确定我是否理解所有内容，但简单
$("ul#navigation").hide()且$("ul#navigation").show()可以工作，不是吗？

于 2013-06-14T12:12:27.990 回答
0

您的 jquery 函数负责此效果。在悬停时它是动画宽度（即缓慢改变宽度）

 $("ul#navigation").hover(function(){
                $('ul#navigation').stop().animate({'width':'150px'},200);
            },
            function () {
                $('ul#navigation').stop().animate({'width':'0px'},200);
            }
        );
于 2013-06-14T12:12:42.177 回答