The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive

(Yes, I like the way Facebook implements its menu on mobile)

By Alberto Varela
Screenshots
You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
Fill the sidrs normally, with existent content, remote content,... or what you want.


Source from : http://www.berriart.com/sidr/

留言

張貼留言

這個網誌中的熱門文章

How to PHP export to Excel 2

How to use PHP to export excel file. export.php <? php // load library require 'php-excel.class.php' ; // create a simple 2-dimensional array $data = array (         1 => array ( 'Name' , 'Surname' ),         array ( 'Schwarz' , 'Oliver' ),         array ( 'Test' , 'Peter' )         ); // generate file (constructor parameters are optional) $xls = new Excel_XML ( 'UTF-8' , false , 'My Test Sheet' ); $xls -> addArray ( $data ); $xls -> generateXML ( 'my-test' ); ?> php-excel.class.php <? php /**  * Simple excel generating from PHP5  *  * @package Utilities  * @license http://www.opensource.org/licenses/mit-license.php  * @author Oliver Schwarz <oliver.schwarz@gmail.com>  * @version 1.0  */ /**  * Generating excel documents on-the-fly from PHP5  *  * Uses the excel XML-specification t...
閱讀完整內容

html viewport meta

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。 神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。 屬性說明 W3C 協會定義  viewport meta  目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。 viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport { width: device-width; initial-scale: 1.0 } 基本說明 width=device-width 先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。 因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。 user-scalable 從屬性名稱來看就是...
閱讀完整內容