網(wǎng)站制作NEWS
25個(gè)適用于手機(jī)網(wǎng)站的菜單插件分享
制作在桌面平臺(tái)使用的網(wǎng)站菜單并不復(fù)雜,因?yàn)橐呀?jīng)有很多案例給我們參考了,但是如果我要在手機(jī)網(wǎng)站制作呢?它的菜單要是怎么樣顯示?手機(jī)或平板電腦的分辨率比桌面電腦要小,一般菜單都不夠位置展示,當(dāng)然分行顯示也是可以的,但是作為一個(gè)優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì),分行你不覺(jué)得很丑陋么,下面我給大家一些方案吧。
現(xiàn)在絕大部分人都使用了智能手機(jī),而這些設(shè)備主要用Android、iOS、Winphone等系統(tǒng),所以內(nèi)置的瀏覽器一般也支持CSS和jQuery,下面我們精選25個(gè)適用于手機(jī)網(wǎng)站的菜單插件,這些插件設(shè)計(jì)以及交互很不錯(cuò),也適用在響應(yīng)式設(shè)計(jì),所以推薦使用它們,當(dāng)然你也可以參考這些菜單重新設(shè)計(jì)樣式,對(duì)于Web設(shè)計(jì)師來(lái)說(shuō)并不是難事。
jQuery.mmenu
下載地址
jPanelMenu
下載地址
PageSlide
下載地址
Slide and Push Menus
下載地址 | 在線演示
Google Nexus Website Menu
下載地址 | 在線演示
Transitions for Off-Canvas Navigations
下載地址 | 在線演示
Sidr
下載地址
Pure CSS Responsive Nav
下載地址 | 在線演示
Multi-Level Push Menu
下載地址 | 在線演示
Naver
下載地址 | 在線演示
Responsive-Menu
下載地址 | 在線演示
SmartMenus
下載地址 | 在線演示
FlexNav
下載地址
slimMenu
下載地址
jQuery Navobile
下載地址
MeanMenu
下載地址 | 在線演示
jQuery ReSmenu
下載地址
Flaunt.js for stylish responsive navigations with nested click-to-reveal
下載地址 | 在線演示
Drop-Down Navigation: Responsive and Touch-Friendly
下載地址 | 在線演示
CSS3 Responsive menu
下載地址 | 在線演示
Responsive Retina-Ready Menu
下載地址 | 在線演示
TinyNav.js
下載地址
Responsive Navigation
下載地址
HorizontalNav
下載地址
Easy Responsive Tabs to Accordion
下載地址
總結(jié)
從上面的插件可以看到手機(jī)菜單主要使用側(cè)邊欄來(lái)展示,和一些APP的UI設(shè)計(jì)十分相似,其次使用下拉框或響應(yīng)式設(shè)計(jì),這些都是很好解決網(wǎng)站菜單的顯示問(wèn)題,通過(guò)這些插件,手機(jī)網(wǎng)站已經(jīng)是未來(lái)需求,這些插件確實(shí)很有用處,記得收藏或分享,以備一時(shí)之需,最后希望你能設(shè)計(jì)出更多更棒的移動(dòng)設(shè)備界面!
多重隨機(jī)標(biāo)簽