srcmini本文概述
- 10. Slide Reveal
- 9. Sidr
- 8. Drawer
- 7. Simpler Sidebar
- 6. Slidebars
- 5. Trunk
- 4. Sliiide
- 3. bigSlide.js
- 2. jQuery.mmenu
- 1. Slideout.js
“绘图”面板或侧边栏菜单是一个导航面板, 在大多数情况下, 它将显示网页中访客的导航选项。它通常(但不是必须)位于屏幕的左侧(隐藏), 并且在用户触发按钮时显示。
在此顶部, 我们将与你分享网络上最重要的10个侧边栏菜单插件。
10. Slide Reveal
Github
Slide Reveal是一个jQuery插件, 可通过从页面的左侧或右侧滑动来显示侧面板。该插件不会在你的侧面板中添加任何精美的CSS。因此, 你需要自己设置样式, 以获得漂亮的阴影面板或漂亮的导航。
9. Sidr
Github
Sidr是一个用于创建侧面响应菜单的jQuery插件。它在现代浏览器中使用CSS3过渡, 并在不支持时回退到jQuery.animate。
Sidr的用法非常简单, 只需创建一个名为sidr的div并将菜单放在此处即可。然后激活将其绑定到链接的插件。默认情况下, 菜单是不可见的, 并且通过单击链接可以显示或隐藏菜单。你可以在同一页面中创建任意数量的菜单, 也可以将其放在右侧或左侧。插件包含两个主题(两个样式表), 一个为深色, 一个为浅色。你可以使用它们, 创建一个新样式或使用你自己的样式覆盖它们。
8. Drawer
Github
Drawer是使用jQuery, iScroll和CSS的灵活抽屉菜单实现。
7. Simpler Sidebar
Github
一个jQuery插件, 可以像现代移动应用程序一样创建侧面导航。它旨在简化程序, 以便无论是否有专业程序员, 每个人都可以使用它。你将需要准备一个特定的HTML模板, 以使其正常工作。在网页底部的</ body>标记之前, 包括jQuery库。如果你对更好的宽松感兴趣, 也可以包括jQuery-UI库。最终包括更简单的侧边栏。要自定义插件, 请在插件本身中添加所需的选项。也在选项列表文档页面中检出所有可用选项。
6. Slidebars
Github
Slidebars是一个jQuery插件, 用于快速轻松地在你的网站中实现应用程序样式的显示菜单和侧边栏。 Slidebars诞生于2014年, 因为经常需要在响应式设计中创建移动菜单, 因此Slidebars迅速成为开发人员的第一选择。随着版本2的发布, Slidebars拥有比以往更多的功能, 并且占地面积更小。
新的Slidebars压缩后仅重1.69kb, 具有简洁明快的标记, 允许在任意一侧无限制的脱离画布实例, 并配有完整的API, 回调和事件以进行最终控制。
5. Trunk
如果你使用的是笔记本电脑或台式机, 请根据你的喜好调整窗口的宽度。响应式网站是未来之路！当你可以建立一个站点并让CSS完成所有工作时, 为什么还要维护多个站点？ Trunk.js帮助你减轻负担, 并为你提供黄油般光滑的导航抽屉。 Trunk.js将你的导航拉入纵向的”抽屉”, 并横向显示在顶部。我遇到的几乎所有抽屉都是使用jQuery动画构建的。抖动或捕捉结果是由于此方法引起的。我已经建立了Trunk.js以使用jQuery触发事件, 但是它随CSS一起移动。此方法使动画感觉自然且流畅。
Trunk.js说：” iPhone和Android设备上不再有笨拙的动画”。长期以来, 网站一直在懒惰地使用导航抽屉。释放出如此宝贵的屏幕空间真是太好了, 但是为什么它必须毁掉用户体验呢？我们不能同时拥有吗？ Trunk.js以响亮的”是”响应。在你的移动设备上打开它, 看看Nav Drawer的真实感觉。迷你平板电脑与他们的大兄弟(或姐妹)非常相似。实际上, iPad Mini的屏幕尺寸与普通iPad相同, 从而使开发人员可以更轻松地为一台设备编写代码。 Kindle Fires甚至某些Galaxy智能手机是如此之大, 以至于跨越了围栏。 Trunk.js是所有这些迷你怪兽的宝贵布局。
4. Sliiide
Github
如果你有一个div(可能是导航菜单或侧边栏), 则希望使用从视口外部到视口内部的滑动效果进行动画处理。你想完全控制此div滑动的距离, 但是你不必担心如何放置它或如何拉伸它以匹配屏幕尺寸。你也不必担心动画如何影响页面的其余部分, 如何处理滚动以及激活和停用菜单的背后逻辑。然后, Sliiide是适合你的插件。
3. bigSlide.js
Github
bigSlide是一个很小的jQuery(压缩后约为1kb)插件, 用于创建屏幕外的幻灯片面板导航。它将滑动导航面板以及给定.push类(或你在设置中选择的类)的所有容器。
2. jQuery.mmenu
Github
MMenu是一个jQuery插件, 用于应用程序外观类似的画布上菜单和画布上菜单, 带有用于你的网站和Web应用程序的滑动子菜单。它可以通过广泛的选项, 扩展和附件进行高度自定义, 并且将始终满足你的需求。 jQuery.mmenu插件是开源软件, 你可以随意将jQuery.mmenu插件用于个人或非营利性网站。对于商业用途, 请购买许可证。菜单的HTML像往常一样使用UL, LI和A元素, 该插件会自动将一个点击事件绑定到一个打开菜单的Click事件上, 该事件会链接到菜单的每个A元素。
1. Slideout.js
Github
Slideout.js是用于移动Web应用程序的触摸式滑动导航菜单。该插件的功能是：
- 无依赖关系。
- 简单的标记。
- 本机滚动。
- 易于定制。
- CSS转换和过渡。
- 才2 Kb！ (最小＆gzip)
如果你知道另一个很棒的移动设备侧栏插件, 请在评论框中与社区共享。
评论前必须登录！
注册