制作在桌面平台使用的网站菜单并不复杂,因为已经有很多案例给我们参考了,但是如果我要在手机网站制作呢?它的菜单要是怎么样显示?手机或平板电脑的分辨率比桌面电脑要小,一般菜单都不够位置展示,当然分行显示也是可以的,但是作为一个优秀网页设计,分行你不觉得很丑陋么,下面我给大家一些方案吧。
现在绝大部分人都使用了智能手机,而这些设备主要用Android、iOS、Winphone等系统,所以内置的浏览器一般也支持CSS和jQuery,下面我们精选25个适用于手机网站的菜单插件,这些插件设计以及交互很不错,也适用在响应式设计,所以推荐使用它们,当然你也可以参考这些菜单重新设计样式,对于Web设计师来说并不是难事。
jQuery.mmenu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/0227003Qm.jpg)
下载地址
jPanelMenu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022657XV1.jpg)
下载地址
PageSlide
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022701D2C.jpg)
下载地址
Slide and Push Menus
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022702vJy.jpg)
下载地址 | 在线演示
Google Nexus Website Menu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022702Stj.jpg)
下载地址 | 在线演示
Transitions for Off-Canvas Navigations
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022703WRv.jpg)
下载地址 | 在线演示
Sidr
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022656Ul2.jpg)
下载地址
Pure CSS Responsive Nav
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022704EQ9.jpg)
下载地址 | 在线演示
Multi-Level Push Menu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/02270546z.jpg)
下载地址 | 在线演示
Naver
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022705RXR.jpg)
下载地址 | 在线演示
Responsive-Menu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022706k3n.jpg)
下载地址 | 在线演示
SmartMenus
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/0227091nZ.jpg)
下载地址 | 在线演示
FlexNav
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022716xjR.jpg)
下载地址
slimMenu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022717Zx1.jpg)
下载地址
jQuery Navobile
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022720A1n.jpg)
下载地址
MeanMenu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022721koI.jpg)
下载地址 | 在线演示
jQuery ReSmenu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022721h3T.jpg)
下载地址
Flaunt.js for stylish responsive navigations with nested click-to-reveal
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022722VeK.jpg)
下载地址 | 在线演示
Drop-Down Navigation: Responsive and Touch-Friendly
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/0227234m2.jpg)
下载地址 | 在线演示
CSS3 Responsive menu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022724eLE.jpg)
下载地址 | 在线演示
Responsive Retina-Ready Menu
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/02272509G.jpg)
下载地址 | 在线演示
TinyNav.js
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022727470.jpg)
下载地址
Responsive Navigation
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022728vuO.jpg)
下载地址
HorizontalNav
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022729PVL.jpg)
下载地址
Easy Responsive Tabs to Accordion
![25个适用于手机网站的菜单插件分享](http://images.shejidaren.com/wp-content/uploads/2014/02/022729vKw.jpg)
下载地址
总结
从上面的插件可以看到手机菜单主要使用侧边栏来展示,和一些APP的UI设计十分相似,其次使用下拉框或响应式设计,这些都是很好解决网站菜单的显示问题,通过这些插件,手机网站已经是未来需求,这些插件确实很有用处,记得收藏或分享,以备一时之需,最后希望你能设计出更多更棒的移动设备界面!