学习前端第一步——wordpress下拉菜单栏
本文最后更新于 411 天前,其中的信息可能已经有所发展或是发生改变。
div分析

最近在写一个小主题,想写好之后给自己用用,可是有很多东西都还是不会的,于是在努力的学习(看别的大神的代码)之下,我渐渐懂了些什么·······

言归正传,那天要开始写菜单栏了,输出菜单栏好不容易搞定了,第一级的菜单css也好不容易写好了,可是下拉菜单栏好久实现不了,我在咨询了许多大神之后明白了不用js也是可以实现这个效果的(不会使用js的原因,不太喜欢使用js,正在学) 通过css的选择器是可以实现这个原理的,先看一张截图:
小编将菜单div命名为了”top_menuBar”,在底下加了一个nav元素来承载菜单,可以发现,wordpress是以ul-li-a的方式输出菜单的(这不是废话吗)

我们会发现,在有二级菜单的菜单项底下一级有一个 .sub-menu 的 ul 承载了子菜单,而且这个ul与父级菜单 li 下面的 a 元素是同级的,有了这一点,我们就好办了~

我们现在要做的就是用hover伪类+css的选择器来保证当 .menu 下的 li 下面的 a:hover 时显示 .sub-menu、那么我们的思路是使用css兄弟选择器直接显示与a同级ul元素

.sub-menu {background: #000;}
/*--先控制下拉菜单栏不显示,并且预定义菜单栏的外观属性--*/
.menu li a:hover +ul {display: block;} 
/*--这是最关键的一步,使用css兄弟选择器显示与a同级的ul--*/
.sub-menu:hover{display: block;}
/*--这也是很关键的东西,保证了鼠标在ul(.sub-menu)上面时.sub-menu不会随着鼠标脱离a而不显示--*/
/*--下面你可以定义自己的菜单属性,菜单内部的a外观啊什么的--*/

另外关于如何输出菜单?小编也是费了一番周折,其实到最后发现没什么难的,在此给大家贴代码了~~

// 注册菜单(同时包括头部和脚部,在后台的外观中就会显示“菜单”这个选项了~)
function register_menu(){
    if ( function_exists('register_nav_menus')) {register_nav_menus(array('header-menu' =>'顶部菜单'));}
    if ( function_exists('register_nav_menus')) {register_nav_menus(array('footer-menu' =>'底部菜单'));}
}
    add_action('init','register_menu');
//空菜单栏回调函数(当菜单为空的时候也给菜单输出点东西,我这里是首页)
function top_menuBar_null(){
    echo ''
}

上面的代码贴到functions.php中就好,下面在header.php(或者footer.php)中调用。

mymenu

上面的代码贴到要调用的header or footer的位置中就好,footer菜单的调用基本一样,改改名字就好,就不写了~
下面给大家看看我的菜单栏(个人认为挺漂亮的,可是老大说很丑,好寒心·····)

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇