PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」

昨今はレスポンシブデザインが流行している感じですが、Simple Responsive jQuery Navigation Pluginを利用すると、階層化されたメニューもいい感じで対応してくれます。

sponsors

使用方法

Simple Responsive jQuery Navigation Pluginからファイル一式をダウンロード。
メニューは下記のようなシンプルで3階層まであるもの。

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Our Mission</a></li>
                        <li><a href="#">General Info</a></li>
                        <li><a href="#">History</a></li>
                    </ul>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">Locations</a>
                            <ul>
                                <li><a href="#">United States</a></li>
                                <li><a href="#">England</a></li>
                                <li><a href="#">China</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Employment</a></li>
                    </ul>
                </li>
            </ul>
これをレスポンシブにするため、jsを下記のように記述します。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.responsinav.js"></script>
<script>
$(function(){
    $(window).responsinav({ 
    	breakpoint: 480 //横幅**pxで切り替え
    }); 
});
</script>
あとはCSSで見た目を整えれば完成です。

nav,ul,li{ margin:0;padding:0;}
nav{ display: block; }
        a.mobile_handle { display: none; }
        ul { display: block; }
        ul li { display: inline; position: relative; float: left; list-style: none; }
          ul a, ul a:link, ul a:visited { display: block; float: left; padding: 2px 12px 4px 12px; margin: 0; line-height: 10px; color: #000; }
          ul a:hover, ul a:active { text-decoration: underline; }
        ul ul { display: none; position: absolute; top: 18px; left: 7px; width: 120px; padding: 5px; background-color: #000; background-color: rgba(0, 0, 0, .7); }
          ul ul li { display: block; float: none; clear: both; }
          ul ul a, ul ul a:link, ul ul a:visited { display: block; float: none; border: 0; padding: 8px 5px; margin: 0; color: #fff; }
          ul ul a:hover, ul ul a:active { text-decoration: underline; }
          
                ul ul ul { top: 0; left: 125px; }

                /* ここから幅を縮めた時 */
                 @media (max-width: 480px){
        
        body { margin-top: 40px; font-size: 18px; } 
        
        nav{ position: fixed; float: none; margin: 0; padding: 0; top: 0; left: 0; width: 100%; }
        
        a.mobile_handle { display: block; padding: 10px; background: #a8acbf; text-align: center; }
        
        ul { display: none; }
        ul li { display: block; position: relative; float: none; padding: 0; background: #e3e3e3; border-top: 1px solid #757575; }
        ul a, ul a:link, ul a:visited { display: block; position: relative; float: none; padding: 15px 10px; clear: both; }
                    
        ul ul { display: none; position: relative; width: 100%; top: 0; left: 0; margin: 0; padding: 0; background: none; border-bottom: 2px solid #757575; }
            ul ul li { background: #cfcfcf; }
            ul ul a, ul ul a:link, ul ul a:visited { color: #000; padding: 15px 10px 15px 25px; }
              
    }
あとは好みに応じてCSSを調整ください。

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors