简体繁体 English

悬停时侧边栏菜单折叠

[英]Sidebar menu foldout on hover

原文 2014-03-05 23:56:22 0 1 javascript/ html/ css/ responsive-design

I would like to add to my page a sidebar menu that looks like the one on http://feedly.com/#discover 我想在页面上添加一个类似于http://feedly.com/#discover上的侧边栏菜单

在此处输入图片说明

The way it works is that when you hover the sidebar, the menu shows up. 它的工作方式是，当您将鼠标悬停在侧栏上时，将显示菜单。 When the mouse is out of the sidebar, the menu hides. 当鼠标移出侧边栏时，菜单将隐藏。

As an extra (feedly does not have it) I'd like that the content is pushed to the right when the menu folds out. 作为一个额外的功能（不需要提供），我希望在菜单展开时将内容推到右侧。

Could anyone please tell me how that could be made? 谁能告诉我该怎么做？

I tried looking into their source or find something similar, but couldn't... 我试图调查他们的来源或找到类似的东西，但无法...

Any indication on where to start looking would be very much appreciated! 任何迹象表明从哪里开始寻找将不胜感激！

1 个解决方案

This tutorial and demo may be of some help. 本教程和演示可能会有所帮助。

http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/ http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/

It has an example of the push out side menu. 它有一个推出菜单的示例。 You'll have to change the events to be on mouseover and mouseout of the toggle button and the side menu itself. 您必须将事件更改为在切换按钮和侧边菜单本身的鼠标悬停和鼠标移出时。