Flexnavの実装について

はじめまして

wordpress 4.1+Welcart+4+WelcartBasicにてサイトを作成しております。
メインメニューのことでお伺いしたいのですが

<?php if(! welcart_basic_is_cart_page()): ?>

<nav id="site-navigation" class="main-navigation" role="navigation">
<label for="panel"><span></span></label>
<input type="checkbox" id="panel" class="on-off" />

<?php
$page_c=get_page_by_path('usces-cart');
$page_m=get_page_by_path('usces-member');
$pages="{$page_c->ID},{$page_m->ID}";
wp_nav_menu( array( 'theme_location' => 'header', 'container_class' => 'nav-menu-open' , 'exclude' => $pages ,  'menu_class' => 'header-nav-container cf' ) );
?>
</nav><!-- #site-navigation -->

<?php endif; ?>

メインメニューの表示には
管理画面よりカスタムメニューを作成しています。
そのカスタムメニューで出力されるコードに
Flexnavを実装したいのですが
いろいろと試してみましたが
以下の部分がどうしても実装できず困っています。

http://jasonweaver.name/lab/flexiblenavigation/
希望のアクションはレスポンシブテーマを利用しておりますので

PCでの表示は
ホーム|カテゴリ1|カテゴリ2|カテゴリ3|カテゴリ4|
スマホでの表示は
メインメニュー
┣カテゴリ1(右端をタップしてカテゴリ1の子メニューが表示される)
┃┣カテゴリ1-1
┃
┣カテゴリ2(右端をタップしてカテゴリ2の子メニューが表示される)
┃┣カテゴリ2-1
┃

希望はFlexNavで実装したいのですが
<label>タグを用いたcssとの組み合わせで動作するメニューでも
かまいませんのでスマホ画面の時にタップしてメニューを開いていきたいと思っております。