下面提供的是我的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或类添加为#open
,#close
和/或.open
,.close
。
答案 0 :(得分:2)
您可以使用jQuery的动画功能,应该可以轻松完成工作。
关于.animate的教程/信息:
http://viralpatel.net/blogs/understanding-jquery-animate-function/
答案 1 :(得分:0)
这里确实没有足够的信息来了解你想要什么,因为页面的布局很重要。不知道菜单应该是绝对的,固定的还是相对的。
您可以使用jQuery的animate()方法为CSS数字属性设置动画,然后使用mouseenter
和mouseleave
来滑动菜单。
http://jsfiddle.net/thinkingmedia/8a7GL/1/
这只是两行代码。