导航栏:navbar 的三种类型和下拉菜单怎么接

· zblog · 阅读 17
摘要

导航看着简单,是最容易出兼容问题的地方。 数据从哪来。 $zbp->modules 里 FileName 为 navbar 的那个模块,GetList() 拿到的是一串现成的 。 但多数主题不用这个。为什么?因为拿到的是一整串

导航看着简单,是最容易出兼容问题的地方。

数据从哪来。

$zbp->modules 里 FileName 为 navbar 的那个模块,GetList() 拿到的是一串现成的 <li>。

但多数主题不用这个。为什么?因为拿到的是一整串 HTML,想给某一项加 class、加图标、做下拉,插不进去。所以都是自己遍历 $zbp->modules['navbar']->Content,或者更常见的——遍历 $zbp->GetNavigation() 之类拿结构化数据。

三种类型。

导航项本质只有三种:分类、页面、自定义链接。

分类项带 CategoryID,链接要拼成伪静态后的地址。页面项带 PageID。自定义链接最自由,URL 原样输出。

类型判断决定了不少细节。比如「当前项高亮」——分类项要和 $category->ID 比,页面项要和 $article->Type==1 且 ID 相符比。

这里容易漏:文章页属于某个分类时,那个分类也应该高亮。不然用户点进文章,导航上所有项都变灰,找不到自己在哪。

做法是文章页时,把 CategoryID 也纳入比较。简单一行,体验差很多。

下拉菜单。

分类有子分类时,下拉是自然需求。

数据结构上,$zbp->categorys 里每一项有 ParentID。父类 ID 为 0。所以取某个分类的子类,就是筛 ParentID == 那个ID。

只有两层,不用递归。

渲染时,有子类的项加个 class,外层包 div,里层再一个 ul 装子类。CSS 上 :hover 展开,或者加个箭头点击展开。

移动端 hover 不存在,必须改成点击。这点如果只在 PC 上测,上线就被骂。

几个实测问题。

第一,伪静态没开的时候链接是带参数的,开了以后是纯路径。写模板时别拼死 URL,用 $category->Url,框架会自己处理。

第二,导航项太多会换行。PC 上还好,撑一撑;移动端必须折叠成汉堡菜单。汉堡菜单的展开逻辑写在外层容器上,别写在每个项上。

第三,固定定位的导航 + 锚点跳转。点锚点跳过去,目标被导航盖住一截。CSS 上给锚点目标加 scroll-margin-top,值等于导航高度。这行不加,跳转永远差 60 像素。

你站上导航现在是几个项?有没有做下拉?