yii2顶部导航使用

yii2中使用顶部导航的具体方法:

1.视图中调用两个类:

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

2. <?php
            NavBar::begin([
                ‘brandLabel‘ => ‘My Company‘,
                ‘brandUrl‘ => Yii::$app->homeUrl,
                ‘options‘ => [
                    ‘class‘ => ‘navbar-inverse navbar-fixed-top‘,
                ],
            ]);
            $menuItems = [
                [‘label‘ => ‘Home‘, ‘url‘ => [‘/site/index‘]],
                [‘label‘=>‘注册‘,‘url‘=>[‘/manager/register‘]],
                [‘label‘=>‘关于我们‘,‘url‘=>[‘/site/about‘]],
            ];
            if (Yii::$app->user->isGuest) {
                $menuItems[] = [‘label‘ => ‘Login‘, ‘url‘ => [‘/site/login‘]];
            } else {
                $menuItems[] = [
                    ‘label‘ => ‘Logout (‘ . Yii::$app->user->identity->username . ‘)‘,
                    ‘url‘ => [‘/site/logout‘],
                    ‘linkOptions‘ => [‘data-method‘ => ‘post‘]
                ];
            }
            
            echo Nav::widget([
                ‘options‘ => [‘class‘ => ‘navbar-nav navbar-right‘],
                ‘items‘ => $menuItems,
            ]);
            NavBar::end();
        ?>

效果如下图:

时间: 2024-10-23 06:52:14

yii2顶部导航使用的相关文章

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

[UI组件基础] 制作一个带有底部导航以及顶部导航的single view application

最近开始写博客了,把我学习到的东西进行汇总和总结. 很多初学iOS手机应用程序开发的刚开始肯定是抓头的,搞不好,是大片大片的头发往下扯. 因为很迷茫啊,都不知道要怎么弄,有真机有大神帮忙的人还好说,没有机器又没有朋友的人就惨了,完全不知道从何开始. 其实我觉得把,如果是真想学,最次最次,你最少弄个XCode用用看. 前期如果没有XCode,没有苹果电脑,也可以先从基础语法开始学起,其实oc语法也很蛋疼的,什么*啊,alloc啊init啊.估计跟大家想象的世界完全不同,学了java的人再来看oc,

天书笔记:HTML+CSS实现顶部导航栏

此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 下面逐条分析这一堆东西 HTML部分主要是这个: 1 <div class="topbar"> 2 <div class="topbody"> 3 <a class="title" href=""&

Android ViewPager和Fragment实现顶部导航界面滑动效果

在项目中,我们常常需要实现界面滑动切换的效果.例如,微信界面的左右滑动切换效果.那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果. 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释,如图: 具体意思如下: Layout 管理器允许用户可以在页面上,左右滑动来翻动页面.你可以考虑实现PagerAdapter接口来显示该效果. ViewPager很多时候会结合Fragment一块使用,这种方法使得管理每个页面的生命周期变得

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot

sharepoint 2013 中自建母版页,自动生成html中的顶部导航代码步骤

sharepoint 2013 中自建母版页,自动生成html中的顶部导航代码步骤 分类: SharePoint2013-07-05 11:21 738人阅读 评论(0) 收藏 举报 SharePointsharepoint 2013 1.点击打开设计编辑器:编辑母版页项目 2.找到或者新建一个测试页面(.html),点击网页右上方的"代码段"打开 3.点击代码段打开如下页面,点击对应导航便会自动生成html中可以直接是用的导航代码 4.复制代码段到html模板中相应位置(自行定义,可

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

基于jQuery实现页面滚动时顶部导航显示隐藏效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel=&quo

可滑动的顶部导航页ViewPager和Fragment的使用

可滑动的顶部导航页ViewPager和Fragment的使用 通过ViewPager和Fragment实现侧滑切换导航栏的功能,如下图所示. 一.定义主布局文件main.xml 最上面是一个导航栏,分别有三个textview构成,然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2