欢迎回到KnowledgeCity的课程 在层叠样式表上。 我是Cliff Brozo，我是你的老师。 今天，你猜对了， 我们将讨论菜单。 我们来看一些下拉菜单， 我们将以圆圈的形式看动画 我们将滑动侧边栏菜单， 我们将探讨什么是粘性的底部菜单， 最后会有奖金。 你渴望学习吗？ 我走吧 我们将从一个简单的下拉菜单开始。 下拉菜单可以包含多个下拉菜单 随你便。 在这种情况下，该屏幕位于屏幕右侧， 我们将看动画。 当您点击汉堡菜单时， 突然之间，我们弹出了子菜单。 我要请你记住 您十年级的一些几何 当我们讨论3D空间中的x，y和z平面时。 滑动导航从侧面出来 当您单击打开的菜单时， 菜单打开后，您可以选择子菜单。 当然，您可以关闭菜单。 粘性底部菜单是我们习惯的 如果您曾经使用过手机， 所有导航都在底部。 诚然，我们也可以在网页上做到这一点。 最后，我谈到了奖金， 我们将研究如何将图标作为菜单的一部分。 让我们看看所有这些东西是如何工作的。 我们将从下拉菜单开始。 它的代码具有直接的HTML无序列表， 具有一，二，三项， 第四项是下拉菜单。 我创建了一个名为"放下按钮"的类。 那是在CSS中。 这就是我要呼吁的， 为了使此下拉功能起作用。 让我们看看它是如何工作的。 当我将鼠标悬停在知识城上时，什么也没发生。 当我将鼠标悬停在计算机编程上时，什么也没发生。 图标导航栏没有任何反应。 但是当我开始使用CSS时， 那是一个带有class drop button的按钮。 它允许我做什么 从此列表中选择子菜单。 当我将鼠标悬停在它们上面时，颜色会改变， 这就是CSS处理的内容。 这是代码。 该代码的主要部分处理下拉内容。 其余部分与普通导航菜单类似。 但是我们的下拉内容 让我将鼠标悬停在某物上 并由于此悬停部分而更改了颜色。 而通常我的背景色 是下拉列表中的柠檬雪纺。 悬停时，我更改了背景颜色 道奇蓝。 这发生在第56行。 在CSS中，颜色变为柠檬雪纺， 并且背景颜色是道奇蓝色。 当我离开时 而且我没有将鼠标悬停在这些项目上， 那么背景色是柠檬雪纺， 文本颜色为Dorger蓝色。 关于此下拉列表框的另一件事。 我们有一些背景阴影。 如您所见，我在第41行有一个框阴影。 您会记得上一课的方框阴影 我们谈论的地方 阴影向右走了多远， 多远，多分散 阴影的颜色到底是什么 这样我们就可以创建一个下拉列表菜单。 接下来是我们的圈子菜单。 我们的圈子菜单显示在完整尺寸的浏览器中。 在中间，我有一个圆圈，里面有三条线， 看起来像普通的汉堡菜单。 我在x，y和z平面中添加了 展示这些线实际上将如何移动。 当我将鼠标悬停在菜单上时，它的大小会增加。 当我单击它时，会弹出子菜单。 当我再次单击以将其关闭时， 菜单消失。 让我们看一下其背后的HTML代码。 该代码是标准的。 我从显示我的小图的图像开始 x，y和z 然后我使用复选框的输入类型 这样我就知道什么时候被点击了 当他们单击"打开"菜单时， 我知道我应该调用该函数， 当他们点击X时， 我知道我应该关闭菜单。 现在提供有关10年级几何的部分。 我们有三行， 这三行将移动， 中间一个会消失。 另外两个将上下旋转。 而且您必须仔细观察这种情况。 将会弹出的项目 是我到其他页面的链接中的项目。 让我们多次单击以查看它的发生。 现在，您必须仔细观察， 即将发生的事情是右上角 将下降45度。 右下角将上升45度， 这将形成字母X。 那样的话 中线将消失。 让我们看几次。 当我单击几次时，请仔细查看。 (欢快的音乐) 让我们看一下CSS代码。 我们从打开按钮开始。 并且"打开"按钮的边框半径为100％。 这给了我一个完美的圈子。 我创建那个圆圈的宽度和高度 在80像素时 我把它放在绝对位置。 我将其从左边距移85像素， 当它打开时，我想简化过渡过程。 现在您将注意到此代码从第32行到第37行 似乎被写了两次。 那是因为不同的浏览器 需要以不同的方式查看代码。 破折号WebKit部分 是为需要以这种方式查看的浏览器而设计的， 和其他浏览器一样 可以直接处理 我将把事物转换成三维空间。 我有一个x位置，一个ay位置， 和az位置。 如果您将x视为来回，则y左右， z上下 您将了解这些东西如何移动 在三维空间中。
