Angular.js+ionic.js 边栏菜单+幻灯片盒子

Slide box in side menu。这是一个移动网页应用，在手机上可以左右滑动盒子，在PC上需要启用Chrome的移动触摸仿真。

slide

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4862
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<title>SlideBox in SideMenu</title>

<body>
    <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
            <ion-nav-bar class="bar-positive">
                <ion-nav-back-button>
                </ion-nav-back-button>
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                    </button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-header-bar class="bar-positive">
                <h1 class="title">Main Panel</h1>
            </ion-header-bar>
            <ion-content class="padding">
                <ion-slide-box does-continue="true" show-pager="true">
                    <ion-slide>
                        <div class="homebox positive-bg">
                            <h1>BLUE</h1>
                        </div>
                    </ion-slide>
                    <ion-slide>
                        <div class="homebox energized-bg">
                            <h1>YELLOW</h1>
                        </div>
                    </ion-slide>
                    <ion-slide>
                        <div class="homebox balanced-bg">
                            <h1>PINK</h1>
                        </div>
                    </ion-slide>
                </ion-slide-box>
            </ion-content>
        </ion-side-menu-content>
        <ion-side-menu side="left">
            <ion-header-bar class="bar-stable">
                <h1 class="title">Left</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list>
                    <ion-item nav-clear menu-close>
                        Home
                    </ion-item>
                    <ion-item nav-clear menu-close>
                        Link 1
                    </ion-item>
                    <ion-item menu-close>
                        Link 2
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</body>

</html>

Slide box in side menu。这是一个移动网页应用，在手机上可以左右滑动盒子，在PC上需要启用Chrome的移动触摸仿真。

slide

编辑器支持Emmet

快捷键

Slide box in side menu。 这是一个移动网页应用，在手机上可以左右滑动盒子，在PC上需要启用Chrome的移动触摸仿真。

slide

Slick.js+Animate.css 带文本说明层的平滑图片轮播控件

使用CSS3给Owl Carousel插件实现的幻灯片添加镜头拉近特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Slide box in side menu。这是一个移动网页应用，在手机上可以左右滑动盒子，在PC上需要启用Chrome的移动触摸仿真。