011-加一个导航把系统后台的菜单调出

本节在布局模板中加一个导航，调出系统后台的自定义菜单

打开后台中的 网站菜单管理![](https://img.kancloud.cn/2d/16/2d1613702dad0e19ed8b4774cd553d92_692x493.png)
后台自己设置好菜单，我们在布局模板中加入相关调用代码，让在其前端显示出来，我们先打开系统默认的看下

在系统默认`pc_layout`模板中这块就是系统的导航菜单并且带下拉的
![](https://img.kancloud.cn/5a/c7/5ac7e779abe8d899b949642b85bca733_690x416.png)
当然我们不需要去完全复制系统的，我们自己先做一个导航，然后套用相应的数据即可

我们用ul列表来做一个列表导航：
![](https://img.kancloud.cn/1e/c9/1ec9850f4fc9758c1e28560b6ecc0679_476x178.png)
显示如下：
![](https://img.kancloud.cn/c9/9d/c99dcdbf8f1746d7305312295ba1c861_511x253.png)
我们加点css让其横向排列（注意：这里不讲html和css知识，所以相关知识请参考html和css等相关资料）

其实做模板主要就是要学会html和css，然后再了解下数据的相关调用就可以了。

加了css后，预览如下：
![](https://img.kancloud.cn/a4/52/a4528000cf56ad35ee84c7ac2006ac43_514x143.png)
这里只做演示不做效果。我们来分析下菜单的调用

先看这行
![](https://img.kancloud.cn/44/4c/444ce412772ad87a9b294a5d83911ad9_678x73.png)
利用php定义一个变量，`$menu_choose `并给一个值，这个值来自后面这句话：
![](https://img.kancloud.cn/f9/53/f95367c18e36b55b6219e51578ababf1_685x71.png)
这里虽然不讲php知识，但是大家还是要了解下这句话的含义，这句话是一个表达式，很多编程语言里都存在，比如js里.

即？ ：  问号冒号 也叫三目元算符

问号前面，代表判断，表示是不是为真，如果为真，那么就体现问号后面的内容，如果为假那么就体现冒号后面的内容

举个例子，1加1等于2 ？ 显示对的 ：显示错的 。前置条件是真，那么就体现问号后面的内容，其他忽略，所以体现的就是“显示对的”。

所以这里问的 `config（‘system_dirname’）`  是不是为真 这个`config（‘system_dirname’）`代表当前频道的关键字（比如cms），存在的话为真。

也就是说如果我们当前访问的是某个频道页（比如cms），那么就体现`config（‘system_dirname’）`即`（cms）`。

但是这里我们访问的是首页，所以`config（'system_dirname'）`代表为假，我们这里体现就是冒号后面的内容，即index

也就是说当前的表达式，我们把index赋值给变量 `$menu_choose`, 即`$menu_choose = 'index';`

这里小段知识点比较啰嗦，如果没看懂就多看几遍，毕竟这个表达式很多地方都会用到，也很方便，堪比if~else的用法

下面看这句：`｛volist｝和｛/volist｝`是配对的，代表循环中间的部分进行循环显示。
![](https://img.kancloud.cn/bd/2a/bd2a4bbc34773a3bd640384eb4f48752_653x93.png)
这里记住固定格式即可，里面的php方法不用管，总之是得到菜单数组

一个是` pc|get _web_menu`;  一个是`wap|get_web_menu`

我们看下简单的代码实现
![](https://img.kancloud.cn/40/1b/401b8c7bf08bacd0249b221302a2b878_676x165.png)
预览：
![](https://img.kancloud.cn/67/da/67da8a2298d85c3dc01a86aa2be6a9c3_544x141.png)
因为后台设置了5个pc头部菜单，所以这里循环了5个显示
![](https://img.kancloud.cn/b6/51/b651cf75c41bf1d4da33f01aa7221c4a_653x514.png)
这时，我们把代码中静态信息换成动态的变量：
![](https://img.kancloud.cn/73/3d/733db1c7c0a59307dec627ffaeed36f1_670x170.png)
相关信息就出来了
![](https://img.kancloud.cn/ce/d7/ced7d5b867851bd8c392bd46af59bc09_540x107.png)
我们这里说明下一级循环，中间内容rs.son子菜单的循环需要css展示，道理相同不在重复表述。

还有其他的变量，就是菜单中的图标和一些其他信息的调用，自己写入代码体会下即可。

本文链接：https://x1.wanxiangsucai.com/read/327.html