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

侧滑菜单在网站设计中被广泛使用，这种类型的菜单在很多网站上都可以看到。它可以显示关键信息，使其更具可读性和美观性，满足用户体验价值！

今天，边肖向大家展示如何使用jquery和css实现侧滑菜单。

下载效果显示源代码。

要创建导航菜单，让我们首先看看html结构：

！DOCTYPE html html lang=' en ' hearteta charset=' UTF-8 ' title animation Menu Demo/title link rel='样式表' href=' https://cdnjs . cloudflare.com/Ajax/libs/normalize/3 . 0 . 3/normalize . CSS ' link href=' https://fonts . googleapis.com/CSS？family=Montserrat' rel='样式表' type='text/css'link rel='样式表' href=' https://max cdn . bootstrapcdn.com/font-awesome/4 . 3 . 0/CSS/font-awesome . min . CSS ' script src=' http 3360https://cdnjs . cloudflare.com/Ajax/libs/jquery/3 . 0 . 0-beta 1/jquery . js '/script script src=' http 3333-Content转到这里-/body/html首先，我们将normalize.css称为默认样式，以确保我们的菜单在每个浏览器中都是相同的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要参考jQuery来切换菜单。

面板按钮

每个站点面板导航按钮都是相似的。经常是图标字体，比如fontawesome，但是我想在这个教程中加入一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，三个div显示为水平水平线。

Span样式如下所示：拨动按钮{位置：固定；宽度： 44px；高度： 40px；padding: 4pxtransition:25sz-index : 15；}.toggle-button : hover { cursor :指针；}.切换按钮。菜单栏{ position: absoluteborder-radius : 2px；宽度：80%；transition:5s}.切换按钮。菜单栏顶部{ border: 4px solid # 555border-bottom:无；top : 0；}.切换按钮。菜单栏-中间{ height: 4px背景色： # 555；边距-top : 7px；边距-bottom : 7px；top: 4px}.切换按钮。菜单栏底部{ border: 4px solid # 555border-top:无；top: 22px}.按钮打开。菜单栏顶部{transform:旋转(45度)平移(8px，8px)；transition:5s}.按钮打开。菜单栏-中间{ transform : translate(230 px)；transition:1s轻松进入；opa city 3360 0；}.按钮打开。菜单栏-底部{transform:旋转(-45)平移(8px，-7px)；transition:5s}按钮位置固定，不移动时滚动页面。它还具有z-index :15样式，以确保它始终位于其他重叠元素之上。按钮由三条水平线组成。每一条横线都有自己的风格，所以我们加上。菜单栏风格。该类的其余样式被移动到一个单独的样式文件中。当动画发生时，我们添加一个类。按钮打开。通过引用jQuery，我们可以更方便地实现它：

$(文档)。ready(function(){ var $ toggleButton=$(')。切换按钮’)；$toggleButton.on('click '，function() {$(this)。toggle class(' button-open ')；});});初学者可能不熟悉jQuery。让我解释一下这是怎么发生的。首先，我们初始化一个名为$togglebutton的变量，它包含我们的按钮。我们将其存储为一个变量，然后创建一个事件监视器来监听点击按钮。每次单击时，事件侦听器都会执行方法函数toggleclass()进行切换。按钮打开。按钮打开我们可以用它来改变这些元素的显示方式。我们用CSS3的translate()和rotate()函数将上下水平线旋转45度，中间的水平线逐渐消失。可以点击演示中的按钮查看效果。

侧滑菜单

侧滑菜单的html结构如下：

div class=' menu-wrap ' div class=' menu-侧栏' ul class=' menu ' lia href=' # ' Home/a/lilia href=' # ' About/a/Lilia href=' # ' Blog/a/Lili class=' menu-item-has-children ' a href=' # '单击箭头/aspan class='侧栏-menu-Arrow '/spanul class=' sub menu ' lia href=' # ' align/a/Lilia href=' # '标记/a/Lilia让我们来看看。其风格如下：菜单包装{背景色： # 6968 AB；位置：固定；top : 0；高度： 100%；宽度： 280 px；边距-left :-280 px；font-size : 1em；font-weight : 700；飞越：汽车；transition:25sz-index : 10；}它的位置是固定的，所以菜单总是在同一个地方滚动。将高度设置为100%。请注意，左边距设置为负数，这使得此菜单从视图中消失。为了使它具有特殊的效果，我们使用jquery调用另一个类来显示和关闭它。JavaScript代码如下：

$(文档)。ready(function(){ var $ toggleButton=$(')。切换按钮')，$ menuWrap=$('。菜单换行')；$toggleButton.on('click '，function() {$(this)。toggle class(' button-open ')；$ menuwrap . toggleclass(' menu-show ')；});});我们添加一个变量$menuwrap，它包含菜单的所有项目，并使用相同的事件来创建按钮。这个的左边界。菜单显示为0，并且添加了一些框阴影效果。菜单-显示{ margin-left : 0；box-shadow : 4px 2px 15px 1px # B9ADAD；}子菜单和链接。

你可能会注意到这门课。菜单项拥有列表项的子级。包含子菜单。同时，链接之后，还有一个类。边栏-菜单-箭头。

li class='菜单项有孩子' a href='# '单击箭头/aspan class='侧栏-菜单-箭头'/spanul class='子菜单'！-listitems-/ul/lispan有一个：after伪元素包来实现fontawesome arrow。默认情况下，子菜单是隐藏的，只在您单击父菜单时显示：

$(文档)。ready(function(){ var $ sidebarArrow=$(')。边栏-菜单-箭头’)；$ sidebararrow . click(function(){ $(this))。下一个()。滑动切换(300)；});});当我们单击箭头时，当一个函数被调用时，它将瞄准下一个元素之后的跨度，并使其可见。我们使用jquery的slidetoggle。它使一个元素的滑动效果出现或消失，函数有一个动画时间参数。

最后，我们的演示菜单项具有悬停效果。它使用：after的伪元素。代码如下：{ content : }之后的菜单-侧栏li a:afterdisplay:块；height: 0.15em绝对位置：top : 100%；宽度：102%；左侧：50%；transform : translate(-50%)；背景-image:线性-渐变(向右，透明50.3%，# FFFA3B 50.3%)；transition:背景位置. 2s .1s放松；背景尺寸： 200%自动；}.{ background-position :-100% 0 }之后的菜单-侧栏Li a :悬停：}这个：after的伪元素包含绝对位于每个链接下的块级元素，高度和宽度为0.15em.我们不只是应用背景色的线条，我们在背景图像函数中使用线性渐变()。虽然这个函数的目的是使颜色渐变，但是我们可以通过指定百分比来改变渐变的颜色。菜单-侧边栏Li a : after { background-image : linear-gradient(向右，透明50.3%，# FFFA3B 50.3%)；}这里一半的线条是透明的，另一半是黄色的。透明部分占据的所有链接的宽度是背景尺寸宽度的200%。

透明部分可以使用其他颜色。这会造成一条线被另一种颜色填充的错觉，但实际上它只是一条或两条彩色线。