位置: 编程技术 - 正文
jQuery+CSS实现一个侧滑导航菜单代码(jq写css样式)
发布时间：2024-02-27推荐整理分享jQuery+CSS实现一个侧滑导航菜单代码(jq写css样式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery css hover,jquery 设置css,jquery使用css,jquery css hover,jquery css hover,jquery css hover,jquery.css,jquery css hover,内容如对您有帮助，希望把文章链接给更多的朋友！
侧滑菜单在网站设计中应用比较广泛，在许多网站上都可以看到此种类型的菜单。它可以展示重点信息，使其更有可读性和美观性，满足用户体验价值！
今天小编给大家展示如何使用jquery和css实现侧滑菜单。
效果展示 源码下载
为了建立导航菜单，让我们先看看html结构：
首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。
面板按钮
每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。
样式看起来如下：
按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：
初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。
.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。
侧滑菜单
侧滑菜单的html的结构如下：
在这里不详细解释每个风格的菜单，我们看下.menu-wrap 的div。它的样式如下：
它的位置是固定的，所以菜单一直在同一个地方滚动。高度设为%。注意，左边距设置为负数，使这菜单从视图中消失。为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下：
我们增加一个变量$menuwrap其中包含菜单的所有项，并使用相同的事件来创建按钮。这个.menu-show的左边距为0，并增加了一些盒子阴影效果。
子菜单和链接
你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时，链接后，有一个class .sidebar-menu-arrow。
span 有一个::after伪元素包实现fontawesome箭头。默认情况下，子菜单是隐藏的，只有单击父级菜单时才出现：
当我们单击箭头，一个函数被调用时，它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失，函数有一个动画时间参数。
最后，我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下：
这个::after伪元素包含在每个环节下绝对定位的块级元素，随着0.em高度和宽度。我们不只是应用背景颜色的线，我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度，我们可以通过指定的百分比，做了一个渐变的颜色变化。
这里一半的线是透明的，另一半是黄色的。通过背景大小%的宽度，使透明部分占用的所有链接的宽度。
而透明的部分可以用其他颜色。这将创建一个线的另一个颜色填充的错觉，但实际上它只是一二色线。
jquery实现表格中点击相应行变色功能效果【实例代码】 对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于：!DOCTYPEhtmlhtmllang="en"xmlns="htt
jQuery轻松实现表格的隔行变色和点击行变色的实例代码 jQuery轻松实现表格的隔行变色和点击行变色的实例代码!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
jQuery绑定事件-多种实现方式总结 jQuery绑定事件-多种实现方式总结htmlheadmetacharset="utf-8"/scriptsrc=
标签: jq写css样式
本文链接地址:https://www.jiuchutong.com/biancheng/385824.html 转载请保留说明！
