如何设计织梦CMS导航栏,使其能同时突出显示当前栏目及其所在的一级栏目?
- 行业动态
- 2024-10-06
- 4119
织梦CMS导航栏突出显示当前栏目及一级栏目实现方法

1. 确定当前栏目ID
需要获取当前页面的栏目ID,这可以通过织梦CMS的变量获取,通常在模板文件中可以通过以下方式获取:
<?php $id = $catid; // 获取当前栏目ID ?>
2. 查询一级栏目ID

需要查询当前栏目所在的一级栏目ID,可以通过以下代码实现:
<?php
// 定义一个函数来获取一级栏目ID
function getTopParentId($catid) {
$top_parent_id = 0;
$sql = "SELECT parentid FROM#@__category
WHERE catid = '$catid'";
$query = $dsql>query($sql);
if ($row = $query>fetch_assoc()) {
$top_parent_id = $row['parentid'];
}
return $top_parent_id;
}
// 调用函数获取一级栏目ID
$top_parent_id = getTopParentId($id);
?>
3. 编写导航栏代码

在模板文件中,编写导航栏的HTML代码,并使用CSS类来突出显示当前栏目和一级栏目。
<ul class="navmenu">
<?php
$dsql>SetQuery("SELECT catid, catname, parentid FROM#@__category
WHERE isshow=1 ORDER BY listorder");
$dsql>Execute('nav');
while ($row = $dsql>GetArray('nav')) {
$class = '';
if ($row['catid'] == $id || $row['catid'] == $top_parent_id) {
$class = 'active'; // 突出显示当前栏目和一级栏目
}
?>
<li class="<?php echo $class; ?>"><a href="<?php echo GetCatUrl($row['catid']); ?>"><?php echo $row['catname']; ?></a></li>
<?php } ?>
</ul>
4. CSS样式
在CSS文件中,定义相应的样式来突出显示当前栏目和一级栏目。
.navmenu li.active a { color: #ff0000; /* 设置突出显示的颜色 */ fontweight: bold; }
5. 测试
完成以上步骤后,保存所有修改并更新模板缓存,在网站前端查看导航栏,确认当前栏目和一级栏目是否被正确突出显示。
通过以上步骤,可以实现在织梦CMS中导航栏突出显示当前栏目和一级栏目的功能,需要注意的是,具体的实现可能因织梦CMS的版本和模板结构有所不同,可能需要根据实际情况进行调整。