多图标选项卡+侧边栏滑动导航菜单

多图标选项卡+侧边栏滑动导航菜单

添加时间:2021-03-07 13:30:04
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图标导航
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款多图标选项卡+侧边栏滑动导航菜单的特效代码,底部有不同的图标可以点击切换不同的选项卡,左侧侧边栏有可以滑动的菜单也可切换不同选项,选项内容可以自由更换,整体效果比较简洁大气,喜欢的童鞋请收下吧。
多图标选项卡+侧边栏滑动导航菜单
分类:导航菜单 > 图标导航 难易:初级

页面的head部分,需引入必要的CSS样式文件和JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/ionic.css">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="js/collide.js"></script>

页面的body部分,用了多个script在需要时加载对应的页面模板,代码如下:

<script id="templates/browse.html" type="text/ng-template">
  <ion-view view-title="浏览">
    <ion-content>
      <h1>浏览</h1>
    </ion-content>
  </ion-view>
</script>
<script id="templates/menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
      <ion-nav-bar class="bar-stable">
        <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-tabs>
        <ion-tab title="Search" icon-off="ion-search" icon-on="ion-search" href="#/app/search">
          <ion-nav-view name="tab-search"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Browse" icon-off="ion-ios-glasses" icon-on="ion-ios-glasses" href="#/app/browse">
          <ion-nav-view name="tab-browse"></ion-nav-view>
        </ion-tab>
        <ion-tab title="Playlist" icon-off="ion-ipod" icon-on="ion-ipod" href="#/app/playlists">
          <ion-nav-view name="tab-playlists"></ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </ion-side-menu-content>

     <!--左侧滑动菜单-->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-stable">
        <h1 class="title">左侧滑动菜单</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item menu-close href="#/app/search">
            搜索
          </ion-item>
          <ion-item menu-close href="#/app/browse">
            浏览
          </ion-item>
          <ion-item menu-close href="#/app/playlists">
            播放列表
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
  </ion-side-menus>
</script>
<script id="templates/playlist.html" type="text/ng-template">
  <ion-view view-title="播放列表">
    <ion-content>
      <h1>播放列表</h1>
    </ion-content>
  </ion-view>
</script>
<script id="templates/playlists.html" type="text/ng-template">
  <ion-view view-title="多图标选项卡+侧边栏滑动导航菜单">
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-view>
</script>
<script id="templates/search.html" type="text/ng-template">
  <ion-view view-title="搜索">
    <ion-content>
      <h1>搜索</h1>
    </ion-content>
  </ion-view>
</script>
<ion-nav-view></ion-nav-view>

页面的底部,需引入一个JS文件,代码如下:

<script type="text/javascript" src="js/index.js"></script>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:多图标选项卡+侧边栏滑动导航菜单

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.115250s