0

下面提供的是我的 html 和 css 代码中的一个片段，我需要如何以及添加什么，不仅是 html 和 css，还包括 javascript，以使其在（打开的权利）方向上作为滑入/滑出工作和（左关闭）div？

我目前没有为此编写任何 javascript，因为我不知道从哪里开始...但是，我正在使用 jquery-1.3.2

如果有人可以提供 jsfiddle，我将不胜感激；）

HTML

<div id="left">
    <a href="#">Edit Profile</a>
    <a href="#">Settings</a>
    <a href="?logoff">Sign Out</a>
</div>

CSS

#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
  width: 145px;
  height: 22px;
  padding: 5px 12px;
  margin: 0;
  border-bottom: 1px solid rgba(204, 204, 204, 0.09);
  float: left;
  display: inline-block;
  position: relative;
  top: 34px;
  color: #15ADFF;
  font: 16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
  width: 138px;
  background: rgba(204, 204, 204, 0.4);
  border-right: 7px solid #15ADFF;
  color: #111;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}

我假设我需要添加一个 id 或 class 作为#open,#close和/或.open, .close。

4

2 回答 2

2

您可以使用 jQuery 的动画功能，应该很容易完成这项工作。

.animate 的教程/信息：

http://viralpatel.net/blogs/understanding-jquery-animate-function/

于 2013-08-11T15:01:46.200 回答
0

这里真的没有足够的信息来知道你想要什么，因为页面的布局很重要。不知道菜单应该是绝对的、固定的还是相对的。

您可以使用 jQuery 的 animate() 方法为 CSS 数字属性设置动画，然后使用mouseenter和mouseleave滑动菜单。

http://jsfiddle.net/thinkingmedia/8a7GL/1/

它只有 2 行代码。

于 2013-08-11T17:04:55.847 回答