设置路径:WordPress后台>>外观>>菜单
找到该位置,先选择你要编辑的菜单,然后添加一个示例页面到菜单,你可以拖拽控制顺序,点击右侧箭头可以详细编辑。,并且你可以添加文章至菜单内。实现导航菜单功能。
多级导航菜单设置效果
导航菜单优化:突出显示个别菜单
如上图所示,我们要突出显示“注册”和“登录”两项菜单,将其做成按钮的形状,后台的设置如下:
对应的代码如下,可以直接复制粘贴使用:
<span style=”display: block;width: 100px;text-align: center;background-color: #f40;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>注册</span>
<span style=”display: block;width: 100px;text-align: center;background-color: #269ad7;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>登录</span>
导航菜单优化:鼠标滑过显示图片
需求场景:鼠标滑动顶部导航菜单的某一项的时候,显示微信公众号的二维码。
效果如下图所示,后台设置类似上图,不再重复截图。
对应的设置代码如下,可以直接复制粘贴使用,也是放在后的“菜单>>菜单结构>>导航标签”中。
<div class=”er”> <!– <span onmouseover=”over()” onmouseout = “out()” id=”show_qrcode” style=”display: block;width: 100px;text-align: center;background-color: #f40;color: #fff;padding-right: 10px;padding-left: 10px;border-radius: 10px;font-size: 18px;”>公众号</span> –> <img class=”gzh” onmouseover=”over()” onmouseout=”out()” src=”http://www.investmentu.cn/wp-content/uploads/2020/08/Wei_Xin.png”> <img class=”erweima” src=”http://www.investmentu.cn/wp-content/uploads/2020/08/Tou_Zi_Da_Xue_Wei_Xin_Gong_Zhong_Hao.jpg” style=”display:none” id=”img” /> </div> </body> <script> function over(){ img = document.getElementById(“img”); img.style.display = “block”; } function out(){ img = document.getElementById(“img”); img.style.display = “none”; } </script> </html> <style type=”text/css”> .gzh { display: block; margin: 10px; width: 30px; position: relative; } .erweima { width: 250px; position: absolute; z-index: 999; } </style>
最近更新
- 在线开发小程序:超过100个设置选项自动生成企业官网/商城拼团秒杀分销/朋友圈图片直播小视频
- 2020年产品更新路线白皮书:回顾与总结
- 苹果应用商店开发者账号申请流程2021版:附个人账号免费升级成公司账号攻略
- WordPress网站转手机APP和小程序,安卓苹果微信百度支付宝抖音全平台小程序
- 春节提前撒红包,好友助力走起来!钱多钱少不重要,还有一年新希望!
- 三合一企业网站建设:电脑、手机和平板
- 软件开发不求人,费用多少自己算!APP小程序多少钱在线全自动智能出报价单
- 万能下载码:抛开混乱的安卓应用市场,让APP下载更合理
- 支付宝服务商代商户签约APP收款的操作流程
- 商城APP开发对接支付宝和微信收款的申请过程