實現 RWD 的 選單 jquery plugin- FlexNav

最近RWD(Responsive Web Design)正開始流行，於是就有一些讓人簡單實現 RWD 的 plugin。這個 plugin 讓網頁在一般的寬度下是正常的導覽頁，而將頁面縮到一定寬度，就變成手機適合操作的 UI 的樣子。

Plugin 位置
FlexNav

簡單的設置按鈕

view plaincopy to clipboardprint

1. <ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>  

在一般的選單列外設置一個 div ，用來塞窄頁面的選單用的。

view plaincopy to clipboardprint

1. <div class="menu-button">Menu</div>  

引入 CSS 跟加入 plugin

view plaincopy to clipboardprint

1. <link href="css/flexnav.css" rel="stylesheet" type="text/css" />  
2. <script type="text/javascript" src="js/jquery.flexnav.min.js"></script>  

最後再使用就完成了

view plaincopy to clipboardprint

1. $(".flexnav").flexNav();