使用<div>标记</div>滑出

Question

首先，如果我问新手问题，我很抱歉..

请看问题：

非常像这一个：http://jqueryui.com/resources/demos/toggle/default.html

但是如何将按钮浮动在页面的左/右侧。

非常感谢，抱歉英语不好。我很感激你的帮助。

Answer 1

它被称为浮动菜单。

我找到了一个描述投放博客的页面。我自己没试过。

http://haseebnet.blogspot.ca/2013/01/floating-menu-for-your-blogger-blog.html#.Uh7wcBsqZR0

编辑： 您可能正在寻找“折叠”或“手风琴”菜单（两种不同的东西）。 这个家伙在他的博客上做了一个崩溃：

http://markthomson.blogspot.ca/2008/07/collapsible-menu-in-blogger.html

Answer 2

根据我的理解，您希望使用一段代码来练习。检查一下

<强> HTML：

<button>button</button>
<div>Solve HTTP Error 503. The service is in IIS</div>

<强> CSS：

button {
    width:1px;
    word-break: break-all;
    position: fixed;
}
div {
    border: 1px solid #ccc;
    width: 50px;
    display: none;
    left: 25px;
    position: absolute;
}

JS：

$('button').hover(function (e) {
    $('div').toggle("slide", 500);
});

这是一个类似于您期望的working demo。

一个小小的解释：

1）要在按钮中垂直对齐文字，请使用以下CSS

width:1px;
word-break: break-all;

2）使用 .hover() 悬停您要使用 .toggle()

执行的功能

 $('div').toggle("slide", 500);

这里不需要回调。

希望这足以让你自己开始。