猫哥 - 下拉菜单
type: channel
link: https://mynameismaoge.com/tag/xia-la-cai-dan/
items: typecho实现主菜单加上二级下拉菜单

typecho实现主菜单加上二级下拉菜单
type: item
date: 2023-12-16T21:31:00+08:00
description: Typecho并没有像wordpress那样单独管理菜单的功能，而是需要在header文件里面修改，所以也没有相对便捷管理菜单的方法，如果在一级菜单下面添加了子菜单，那么二级菜单也会跟一级菜单并排显示，那怎么样实现把二级菜单放到一级菜单的下拉呢？研究了一下，可以通过单独读取出来写入一个动态的菜单里面去，代码如下：function mainmenu(){ $html = ' 首页 热门促销 活动 淘宝 优惠券 京东 优惠券 品牌 '; $db = Typecho_Db::get(); $categories = $db->fetchAll($db->select('table.metas.*')->from('table.metas') ->where('table.metas.type = ?',"category") ->order('table.metas.order', Typecho_Db::SORT_ASC)); $category_arr = []; if($categories){ foreach($categories as $category){ $parent = $category["parent"]; $category_arr[$parent][] =$category; } } $category_level_1 = $category_arr[0]; foreach($category_level_1 as $_category){ $mid = $_category["mid"]; if($category_arr[$mid]){ $has_submenu = " class='has_submenu'"; } else{ $has_submenu = ""; } $html .= "<li".$has_submenu.">".$_category["name"].""; if($category_arr[$mid]){ $html .= " "; foreach($category_arr[$mid] as $_sub_category){ $html .= " ".$_sub_category["name"].""; } $html .= " "; } $html .= " "; } $html .= " "; return $html; } 把上面这段代码加入到主题的function.php文件里央，然后只需要在调用的地方引用这个菜单函数即可。css样式：mainmenu{ list-style:none; margin:0px; padding:0px;}#mainmenu li{ display:inline-block;margin-bottom: -4px; position:relative;}#mainmenu li ul li{ display:block; width:100px; text-align:center;}#mainmenu li ul li a{ width:100%; padding:0px;}#mainmenu li ul li:last-child a{ border:1px solid #eee;}.sub_menu{ display:none; position:absolute; top:32px; left:0px; padding:0px; margin:0px; background-color:#fff; z-index:9;}Js代码：$(document).ready(function () { $('.has_submenu').hover(function(e){ $(this).find(".sub_menu").show(); },function(){ $(this).find(".sub_menu").hide(); }); }) 细节自己可以调整。