我想大家都用過一些APP應用，它們的菜單展示是以側邊欄滑動方式展現，感覺很新鮮，而現在網頁設計也是如此，不少網站也效仿這樣的方式來設計。使用側邊欄的好處就是可以節約空間，對于一些內容多或者喜歡簡約的網站來說可以嘗試使用側邊工具欄的方式來展示。

?

OpenPanel

以全屏的方式展示面板，Metro風格，看起來不錯。

進入下載頁?|?查看演示

Mb.Jquery

這個mb jQuery插件支持上下左右的方式來展示側邊欄。

進入下載頁?|?查看演示

PageSlide插件

這個邊欄面板插件可以左右展出，我在用Chrome查看效果的時候還是很流暢的。

查看演示及下載

Sidr

這個插件之前的文章也分享過，支持響應式設計。

查看演示及下載

Mmenu

看起來是不是有點像手機的APP程式側邊菜單？插件使用只需要一段JavaScript代碼就行了，方便好用啊。

查看演示及下載

Multi-Level Push Menu

目前Demo我在新版Chrome測試不出效果，在Firefox就可以了。但是這個側邊欄jQuery菜單插件挺強大的，支持多級菜單滑動。

查看演示及下載

簡單的YouTube菜單效果

這個菜單效果模仿youtube網站，點擊菜單圖標時，圖標和菜單的主標題有動畫顯示。

查看演示及下載

Slide And Push Menus

這個滑動面板不錯，有推拉式滑動以及像Fixed定位方式展示出來，左右上下都有，很實用。

查看演示及下載

Google Nexus網站菜單

這個側邊欄菜單模仿Google風格，效果很好。

查看演示及下載

JPanelMenu

這個側邊菜單插件如果用在手機和平板設備是很適合。

查看演示及下載

GilidPanel

這個側邊工具菜單功能很強大，尤其是自定義方面，不過這是要收費的。

查看演示及下載

Pull Out Content Panel

查看演示及下載

Collapsible Sliding Panel For WordPress

查看演示及下載

Responsive Side Toggle Menu

響應式設計的側邊工具菜單。

查看演示及下載

JQuery SideBar Plugin

查看演示及下載

Animate To Hide And Slide Content With JQuery [Tutorial]

這個側邊工具欄插件支持【點擊】和【hover】效果，并附帶制作教程，前端人員的可以學習下。

查看演示及下載

JQuery Mobile Slide Menu

這個側邊工具欄插件的界面比較漂亮，如果不想改CSS樣式的用戶就直接用這個吧。

查看演示及下載

Snap.Js

一看就是Facebook風格的側邊欄

查看演示及下載

Slide Out Menu

這個slider menu和其它插件差不多，看你喜歡的咯~~

查看演示及下載

轉載于:https://www.cnblogs.com/axl234/p/3878200.html

總結

以上是生活随笔為你收集整理的好用的侧边栏菜单/面板jQuery插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。