2013年7月1日 星期一

實現 RWD 的 選單 jquery plugin- FlexNav

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

Plugin 位置
FlexNav

簡單的設置按鈕
  1. <ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>  

在一般的選單列外設置一個 div ,用來塞窄頁面的選單用的。
  1. <div class="menu-button">Menu</div>  

引入 CSS 跟加入 plugin
  1. <link href="css/flexnav.css" rel="stylesheet" type="text/css" />  
  2. <script type="text/javascript" src="js/jquery.flexnav.min.js"></script>  

最後再使用就完成了
  1. $(".flexnav").flexNav();  

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...