jQuery+CSS实现一个侧滑导航菜单代码(2)

.menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; }

它的位置是固定的,所以菜单一直在同一个地方滚动。高度设为100%。注意,左边距设置为负数,使这菜单从视图中消失。为了让它有一个出现的特效,我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下:

$(document).ready(function() { var $toggleButton = $('.toggle-button'), $menuWrap = $('.menu-wrap'); $toggleButton.on('click', function() { $(this).toggleClass('button-open'); $menuWrap.toggleClass('menu-show'); }); });

我们增加一个变量$menuwrap其中包含菜单的所有项,并使用相同的事件来创建按钮。这个.menu-show的左边距为0,并增加了一些盒子阴影效果。

.menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; }

子菜单和链接

你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时,链接后,有一个class .sidebar-menu-arrow。

<li><a href="#">Click The Arrow</a> <span></span> <ul> <!-- List items --> </ul> </li>

span 有一个::after伪元素包实现fontawesome箭头。默认情况下,子菜单是隐藏的,只有单击父级菜单时才出现:

$(document).ready(function() { var $sidebarArrow = $('.sidebar-menu-arrow'); $sidebarArrow.click(function() { $(this).next().slideToggle(300); }); });

当我们单击箭头,一个函数被调用时,它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失,函数有一个动画时间参数。

最后,我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下:

.menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; }

这个::after伪元素包含在每个环节下绝对定位的块级元素,随着0.15em高度和宽度。我们不只是应用背景颜色的线,我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度,我们可以通过指定的百分比,做了一个渐变的颜色变化。

.menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); }

这里一半的线是透明的,另一半是黄色的。通过背景大小200%的宽度,使透明部分占用的所有链接的宽度。

而透明的部分可以用其他颜色。这将创建一个线的另一个颜色填充的错觉,但实际上它只是一二色线。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpsyy.html