单击此处显示/关闭导航 单击此处显示导航

通过创建一个菜单，同步创建垂直导航、水平导航以及侧滑导航；
.sui-nav默认为垂直导航，为.sui-nav添加.horizontal后转为水平导航；
垂直导航、水平导航在分辨率<=768px时自动隐藏，转为侧滑导航;
.hide-in-horizontal仅在垂直导航中显示，包括侧滑导航
.show-in-horizontal仅在水平导航中显示
.hide-in-mobile仅在>768px的屏幕显示
.show-in-mobile仅在<=768px的屏幕显示

介绍以及代码等待完善中，更多请查看源码

<script type="text/javascript">
    $('#sui_nav').SuiNav({
        toggleName: '.MenuToggle', // 控制菜单开关类
        direction: 'left', // 菜单切换方向
        trigger: 'click', // 展开方式，单击展示下层或是悬浮展示
        openingSpeed: 400, // 打开菜单动画时间
        closingSpeed: 400, // 关闭菜单动画时间
        closingCascade: true, // 级联关闭所有菜单，仅对垂直导航菜单有效
        destroy: true // 切换菜单时是否释放控件占用资源
    });
</script>
<div id="sui_nav" class="sui-nav horizontal">
    <div class="sui-nav-wrapper nav-border nav-line">
        <ul>
            <li><a class="text-primary"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span> About</a>
                <ul>
                    <li><a href="#"><span class="glyphicon glyphicon-edit"></span> editor</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> pencil</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-saved"></span> Level23</a>
                        <span class="indicator">></span>
                        <ul>
                            <li><a href="#">Level31</a></li>
                            <li><a href="#">Level32</a></li>
                            <li><a href="#">Level33</a>
                                <ul>
                                    <li><a href="#">Level331</a></li>
                                    <li><a href="#">Level332</a></li>
                                    <li><a href="#">Level333</a></li>
                                    <li><a href="#">Level334</a></li>
                                </ul>
                                <span class="indicator">></span>
                            </li>
                            <li><a href="#">Level34</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-save"></span> Level24</a></li>
                </ul>
            </li>
            <li><a class="text-danger"><span class="glyphicon glyphicon-fire"></span> Hello</a></li>
        </ul>

        <ul class="pull-right">
            <li><a class="text-success">Sign in</a></li>
            <li><a class="text-success">Sing up</a></li>
            <li><a class="text-warning">Others</a>
                <ul>
                    <li><a>Right</a></li>
                    <li><a>Right</a>
                        <ul>
                            <li><a>Right</a></li>
                            <li><a>Right</a></li>
                            <li><a>Right</a></li>
                        </ul>
                    </li>
                    <li><a>Others</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>