jQuery+CSS实现一个侧滑导航菜单代码_jquery

今天小编给大家展示如何使用jquery和css实现侧滑菜单。

效果展示 源码下载

为了建立导航菜单，让我们先看看html结构：

首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。

面板按钮

每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个p显示为水平横线。

样式看起来如下：

.toggle-button {position: fixed;width: 44px;height: 40px;padding: 4px;transition: .25s;z-index: 15;}.toggle-button:hover {cursor: pointer;}.toggle-button .menu-bar {position: absolute;border-radius: 2px;width: 80%;transition: .5s;}.toggle-button .menu-bar-top {border: 4px solid #555;border-bottom: none;top: 0;}.toggle-button .menu-bar-middle {height: 4px;background-color: #555;margin-top: 7px;margin-bottom: 7px;top: 4px;}.toggle-button .menu-bar-bottom {border: 4px solid #555;border-top: none;top: 22px;}.button-open .menu-bar-top {transform: rotate(45deg) translate(8px, 8px);transition: .5s;}.button-open .menu-bar-middle {transform: translate(230px);transition: .1s ease-in;opacity: 0;}.button-open .menu-bar-bottom {transform: rotate(-45deg) translate(8px, -7px);transition: .5s;}

按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :15的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：

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

初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。

.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。

侧滑菜单

侧滑菜单的html的结构如下：

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%的宽度，使透明部分占用的所有链接的宽度。

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

以上就是jQuery+CSS实现一个侧滑导航菜单代码_jquery的内容，更多相关内容请关注PHP中文网（www.php1.cn）！