导航栏:navbar 的三种类型和下拉菜单怎么接
导航看着简单,是最容易出兼容问题的地方。 数据从哪来。 $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 像素。
你站上导航现在是几个项?有没有做下拉?