Typecho主菜单添加二级下拉菜单

最新推荐文章于 2024-09-17 11:42:54 发布

牛店网

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量105

点赞数

文章标签：前端 html javascript

原文链接：https://www.imaoge.com/useful/242.html

版权

来源：typecho实现主菜单加上二级下拉菜单 - 猫哥

Typecho并没有像wordpress那样单独管理菜单的功能，而是需要在header文件里面修改，所以也没有相对便捷管理菜单的方法，如果在一级菜单下面添加了子菜单，那么二级菜单也会跟一级菜单并排显示，那怎么样实现把二级菜单放到一级菜单的下拉呢？研究了一下，可以通过单独读取出来写入一个动态的菜单里面去，代码如下：

function mainmenu(){
    $html = '<ul id="mainmenu"><li><a href="/">首页</a></li>
<li><a class="hot" href="/cuxiao.html">热门促销<hd>活动</hd></a></li>
<li><a href="/taobao.html">淘宝<hd>优惠券</hd></a></li>
<li><a href="/jingdong.html">京东<hd>优惠券</hd></a></li>
<li><a href="/brands.html">品牌</hd></a></li>';
    $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."><a href='/".$_category["slug"]."'>".$_category["name"]."</a>";
        if($category_arr[$mid]){
            $html .= "<ul class='sub_menu'>";
            foreach($category_arr[$mid] as $_sub_category){
                $html .= "<li><a href='/".$_sub_category["slug"]."'>".$_sub_category["name"]."</a>";
            }
            $html .= "</ul>";        
        }
        $html .= "</li>";
    }
    $html .= "</ul>";
    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 () {
    $(&#039;.has_submenu&#039;).hover(function(e){
        $(this).find(&quot;.sub_menu&quot;).show();
    },function(){
        $(this).find(&quot;.sub_menu&quot;).hide();
    });
})

细节自己可以调整。