zblogphp添加二级菜单和个性图标的方法

原创 准教师  2019-01-30 15:00:43  阅读 88 次 评论 0 条

网站内容涉及比较广泛的时候,普通的导航一级菜单样式很难满足网站的需要。实现zblog博客的二级菜单显示样式使用的使<li><ul>的嵌套。无尘居博客使用的主题样式是zbpnana样式,以下是无尘居博客实现二级菜单的代码

<li id="nvabar-item-index">
<a href=" <i class="fas fa-home"></i>首页</a></li>
<li id="nvabar-item-index"><a><i class="fa fa-thumbs-up"></i> 教育观察</a>
<ul class="sub-menu">
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/kanjiaoyu/"><i class=" fa fa-book "></i> 事件反思教育</a>
</li>
<li id="navbar-category-13">
<a href="https://www.iteacher.wang/jiatingjiaoyu/"><i class="fa fa-fire"></i> 家庭教育</a>
</li>
</ul></li>
<li id="nvabar-item-index"><a><i class="fa fa-th-list"></i>教师招考</a>
<ul class="sub-menu">
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/zsdq/"><i class="fa fa-book"></i> 知识点及易错题</a>
</li>
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/zszj/"><i class="fa fa-tree"></i> 知识点总结</a>
</li>
<li id="navbar-category-13">
<a href="https://www.iteacher.wang/ksjy/"><i class="fa fa-folder-open"></i> 经验分享</a>
</li>
</ul></li>
<li id="nvabar-item-index"><a><i class=" fa fa-book"></i> 技术学习</a>
<ul class="sub-menu">
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/office/"><i class="fa fa-tint"></i> office办公</a>
</li>
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/AppInventor/"><i class=" fa fa-fire"></i> App Inventor</a>
</li>
</ul></li>
<li id="nvabar-item-index"><a><i class="fa fa-th-list"></i> 美丽生活</a>
<ul class="sub-menu">
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/shenghuo/"><i class="fa fa-tint"></i> 生活杂谈</a>
</li>
<li id="navbar-category-14">
<a href="https://www.iteacher.wang/lzgs/"><i class="fa fa-thumbs-up"></i> 励志故事</a>
</li>
<li id="navbar-category-14">
<a href=" https://www.iteacher.wang/wzjs/"><i class=" fa fa-fire "></i> 网站记事</a>
</li>
</ul></li>
<li id="nvabar-item-index">
<a><i class="fa fa-user"></i> 留言&投稿</a>
<ul class="sub-menu">
<li id="navbar-category-14"><a href="https://www.iteacher.wang/liuyan/">在线留言</a>
</li>
<li id="navbar-category-14"><a href="https://www.iteacher.wang/?apost_free" > 我要投稿</a>
</li>
<li id="navbar-category-14"><a href="https://www.iteacher.wang/yqlj/">友情链接</a>
</li>
</ul>
</li>

说明其中的<li>的样式id可以根据网站随机设置。不会影响网站效果。

其它的链接地址,显示文字可以根据网站需要自行修改。

本文地址:https://www.iteacher.wang/post/343.html
版权声明:本文为原创文章,版权归 准教师 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?