第六十九章 显示和隐藏

首先,怎么隐藏。

这很简单,你把元素的 display 属性设置为 none 就行了。相反的,设置为 block (根据具体情况选择对应的值)就显示出来了。

然后我们希望它何时显示?适当我们的鼠标移动到一级菜单的菜单项上,它里面的二级菜单才显示。

所以:

nav>ul>li>ul {display: none;position: absolute;top: 0;left: 100%;z-index: 10;width: 120px;padding: 10px;margin: 0;background-color: rgba(0, 0, 0, 0.8);color: #DDDDEE;}nav>ul>li:hover>ul {display: block;}

那么要注意是哪个元素的 hover 状态。

这么简单?就这么简单。那现在考考你哦,为啥我把鼠标移动到二级菜单上,它不会消失,明明鼠标已经移出了 li 的范围。

二级菜单的 ul 写在一级菜单的 li 里面的作用很多。首先在道理上说,是包含关系,这样写结构上很合理。然后上面的 CSS 选择器也可以成立,否则单靠 CSS 可能无法实现了。而定位的时候以父元素为参照,也是相对于上级菜单定位,就不会混乱……

现在呢,二级菜单就是这个一级菜单项的一部分,它是飘出去了,但它依然是父元素的一部分。所以当鼠标在它上面的时候,包含它的 li 元素依旧处于 hover 状态。

在位置上,这两个元素是无缝衔接的,所以我们可以把鼠标移动到子元素上,并不改变父元素的 hover 状态。那如果我们把二级菜单定位的稍微远一些的话,又会怎样呢?大家动手试试效果吧。

那么三级菜单呢?依然这样延续下去就行了,我就不写了。不过如果变通一下,我写个无限延续下去的……长龙,每个触发位置又比较小,是不是就成了一个考验耐心的游戏?

所以,开开脑洞什么的很好玩,别怕出错,不出错才学不会东西呢。何况又不是在学校,出问题了没人打没人骂没人指责也不花钱……你还怕啥?现在不去遇到各种问题,积累足够的经验,难道要等到工作中翻车?喵唧,这账大家应该都算的清楚的。

然后说一下优化,目前鼠标划过菜单并没有变化效果,这不美观,也没有给用户“这里是可以进行交互的”暗示,所以我们应该给它设置一些变化,不需要很大的变化,只要足够让用户发现,温和的变化就好。比如背景颜色,边框什么的。

如果你想使用粘性固定来保证导航栏一直显示。那么首先你要在下面添加内容,这样让页面可以滚动,我们才能测试。

nav {position: -webkit-sticky;top: 0;text-align: center;background-color: #DDDDEE;}

-webkit- 是一个前缀,因为 sticky 并没成为正式的规范,所以浏览器可能不支持它,也可能支持它。但是支持的方式可能是用私有的方式支持,就是某个浏览器给出一个自己独有的值,来实现相同的效果,这样避免了一些可能的冲突。而这个独有的值如果乱取名字就很混乱,也不容易理解。所以一般都是在名字前面加上这个浏览器的前缀,这样既知道是针对于哪个浏览器,又知道是什么,就很科学。这种方式不止在属性值中使用,更多的是在属性名中使用。不过现在随着浏览器厂商都在努力更新,兼容新技术,统一标准。这种东西用的就越来越少了,作为了解就好,初期可以不去考虑这些事情,以后,还有很多工具可以辅助完成这些事情。

原文链接:https://www.ek58.com/archives/3659,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?