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();
        ?>

效果如下图:

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

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

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...

  2. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  3. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  4. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  5. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  6. bootstrap顶部导航遮挡下面内容的解决办法

    使用bootstrap设置顶部导航,并将导航栏固定,代码如下: <nav class="navbar navbar-expand-lg navbar-light bg-light fi ...

  7. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

  8. [js]顶部导航和内容区布局

    自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

随机推荐

  1. 【转】为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment?

    为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment? 转自:http://www.apkbus.com/android- ...

  2. Java Final, Finally, Finalize

    Final is a Keyword, final can be used in three different ways: final variable final method final cla ...

  3. toggle笔记

    <!DOCTYPE html> <!-- saved from url=(0040)http://v3.bootcss.com/examples/carousel/ --> & ...

  4. 获取dom元素的宽度和高度

    一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...

  5. perl常见符号

    =>  键值对,左键右值 -> 引用,相当于java中的 [对象.方法名]中的点号 :: 表示调用类的一个方法 % 散列的标志,定义一个键值对类型的 @ 数组的标志 $ 标量的标志 =~ ...

  6. mysql的粗略学习

    输入root进入mysql 试着输入了两个语法都没动静,输入\h终于有反应了 语法错误 show databases; //显示数据库 为什么没有人告诉我还有个英文下的分隔符号... 查的资料不是没有 ...

  7. I2C实时时钟rx-8025板卡实际应用

    rx-8025是片外I2C实时时钟,其应用于9260板卡方法如下.总体思想是配置内核添加驱动(I2C驱动,内核已提供的很完备),板级文件添加设备,添加设备文件以应用程序操作. 1. 配置内核 1)I2 ...

  8. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  9. SQL Server中的uniqueidentifier类型

    uniqueidentifier类型可以配合T-SQL中的newid和newsequentialid来生成唯一标识符,具体区别如下(摘抄自微软官方文档). Nonsequential GUIDs: Y ...

  10. cocoapods遇到error: RPC failed; curl 56 SSLRead() return error -36问题

    在安装cocoapods遇到的问题 [!] /usr/bin/git clone https://github.com/CocoaPods/Specs.git master Cloning into ...