サイドメニューに動的な列があるようにする

Question

この優れたアイコンベースのサンプルのサイドメニューであるcodepen http://codepen.io/reecegeorge/pen/JuHLqが見つかりました。

下の「Gear」アイコンを例にとると、その上にマウスを置くとサブメニューが表示されます。これは問題ありませんが、多くのアイテムがたくさんある状況では、2列が有利です。私はソース（クイックn '汚い）を変更し、ここに新しいcodepenを持ってhttp://codepen.io/anon/pen/bBQbQv。これで、2番目の列が追加されます。

HTMLは、CSSが私の質問は、完全にこれをオーバーホールしなくても、簡単なCSSの一部（またはJS（jQueryのことができます））これがあるとされて

.sidemenu-sub-sub { 
    margin-left: 106px; 
    width: 178.5px !important; 
} 

を追加

<ul class="sidemenu-sub sidemenu-sub-sub"> 
    <li class="text"> 
     <h4>&nbsp;</h4> 
    </li> 

    <li><a href="#secondcol1">Second column</a></li> 
</ul> 

を追加しました必要な場合にのみ2番目の列が表示されます。たとえば、ユーザーウィンドウのサイズが小さい場合、列1の項目は自動的に列2に流出することがあります。

Answer 1

jQueryを使用して幅または高さを確認し、列を動的に変更できます。私はこれがにあなたのための良いスタートだと思う

$('body').height(); 

：

$('body').width(); 

これはあなたのデバイスの画面の高さを返します。

これは、あなたのデバイスの画面の幅を返します。画面サイズで再生します。