25个适用于手机网站的菜单插件

制作在桌面平台使用的网站菜单并不复杂,因为已经有很多案例给我们参考了,但是如果我要在手机网站制作呢?它的菜单要是怎么样显示?手机或平板电脑的分辨率比桌面电脑要小,一般菜单都不够位置展示,当然分行显示也是可以的,但是作为一个优秀网页设计,分行你不觉得很丑陋么,下面我给大家一些方案吧。

现在绝大部分人都使用了智能手机,而这些设备主要用Android、iOS、Winphone等系统,所以内置的浏览器一般也支持CSS和jQuery,下面我们精选25个适用于手机网站的菜单插件,这些插件设计以及交互很不错,也适用在响应式设计,所以推荐使用它们,当然你也可以参考这些菜单重新设计样式,对于Web设计师来说并不是难事。

JQuery.mmenu

手机菜单插件:jQuery.mmenu
下载地址

JPanelMenu

手机菜单插件:jPanelMenu
下载地址

PageSlide

手机菜单插件:PageSlide
下载地址

Slide And Push Menus

手机菜单插件:Slide and Push Menus
下载地址 | 在线演示

Google Nexus Website Menu

手机菜单插件:Google Nexus Website Menu
下载地址 | 在线演示

Transitions For Off-Canvas Navigations

手机菜单插件:Transitions for Off-Canvas Navigations
下载地址 | 在线演示

Sidr

手机菜单插件:Sidr
下载地址

Pure CSS Responsive Nav

手机菜单插件:Pure CSS Responsive Nav
下载地址 | 在线演示

Multi-Level Push Menu

手机菜单插件:Multi-Level Push Menu
下载地址 | 在线演示

Naver

手机菜单插件:Naver
下载地址 | 在线演示

Responsive-Menu

手机菜单插件:Responsive-Menu
下载地址 | 在线演示

SmartMenus

手机菜单插件:SmartMenus
下载地址 | 在线演示

FlexNav

手机菜单插件:FlexNav
下载地址

SlimMenu

手机菜单插件:slimMenu
下载地址

JQuery Navobile

手机菜单插件:jQuery Navobile
下载地址

MeanMenu

手机菜单插件:MeanMenu
下载地址 | 在线演示

JQuery ReSmenu

手机菜单插件:jQuery ReSmenu
下载地址

Flaunt.js For Stylish Responsive Navigations With Nested Click-To-Reveal

手机菜单插件:Flaunt.js for stylish responsive navigations with nested click-to-reveal
下载地址 | 在线演示

Drop-Down Navigation: Responsive And Touch-Friendly

手机菜单插件:Drop-Down Navigation: Responsive and Touch-Friendly
下载地址 | 在线演示

CSS3 Responsive Menu

手机菜单插件:CSS3 Responsive menu
下载地址 | 在线演示

Responsive Retina-Ready Menu

手机菜单插件:Responsive Retina-Ready Menu
下载地址 | 在线演示

TinyNav.js

手机菜单插件:TinyNav.js
下载地址

Responsive Navigation

手机菜单插件:Responsive Navigation
下载地址

HorizontalNav

手机菜单插件:HorizontalNav
下载地址

Easy Responsive Tabs To Accordion

手机菜单插件:Easy Responsive Tabs to Accordion
下载地址

总结

从上面的插件可以看到手机菜单主要使用侧边栏来展示,和一些APP的UI设计十分相似,其次使用下拉框或响应式设计,这些都是很好解决网站菜单的显示问题,通过这些插件,手机网站已经是未来需求,这些插件确实很有用处,记得收藏或分享,以备一时之需,最后希望你能设计出更多更棒的移动设备界面!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值