在网上经常可以看到一些效果非常酷的隐藏侧边栏菜单效果。隐藏侧边栏作为一种新的菜单布局方式已经被越来越多的人所接受，它给用户一种全新的体验。特别是在移动手机等小屏幕设备上，隐藏侧边栏就显得特别有用。它不会占用多余的空间，只有在需要的时候才显示出来。

隐藏侧边栏菜单经常被使用在移动手机和一些触摸屏设备上。隐藏侧边栏最大的好处是不占用空间，并且只使用少量的javascript和CSS就可以制作出一个隐藏侧边栏效果。

隐藏侧边栏菜单经常是以一个jQuery插件的形式出现，在这篇文章中，我们将使用CSS3 transition 和 animation以及少量的jQuery代码来制作一个效果非常酷的隐藏侧边栏特效。

HTML结构

隐藏侧边栏菜单的HTML结构和普通的菜单的HTML结构稍微有一点不同。我们要关注下面的是三元素：

Container：这是整个页面的包裹容器，它会将隐藏侧边栏菜单和其它页面元素全部包裹起来。

Canvas：这个div是包裹隐藏侧边栏和其它元素的二级容器。

Navigation：这个div是隐藏侧边栏的包裹容器。

基本的HTML结构如下：

下面是添加了菜单项和页面其它元素的代码：

以下是一些要注意的事项：

div#nav中包含了一个带ID #toggle的无序列表。这个ID在后面用于侧边栏的选择和滑动效果。

每个无序列表中都有一个div元素，在div中包含了带font awesome图标的span元素以及它们各自的超链接元素。

如果无序列表中又包含了一个无序列表，就添加一个(+)字体图标。在后面会使用jQuery来使菜单在展开时显示 (-)的字体图标。

带有class为toggle-nav的超链接元素是我们的汉堡包图标。后面会使用jQuery来使它隐藏和展开侧边栏菜单。

CSS样式

首先是设置一些通用样式：

html,body{background: #f3efe0;}

h1, h2, h3{text-align: center;}

h1{

font-family: 'Raleway', Arial, sans-serif;

font-weight: 700;

font-size: 45px;

margin-top: 15px;

color: #38935f;

}

h3{

font-family: 'Raleway', Arial, sans-serif;

font-weight: 400;

font-size: 25px;

margin-top: 15px;

color: #918e84;

}

下面要给包裹容器一些样式。#container设置为宽100%，孤独为100vh，100vh表示整个设备的高度，vh测量单位可以参考这里。同时超出画板的元素要隐藏起来。

#container {

width: 100%;

height: 100vh;

position: relative;

overflow: hidden;

}

下面是#canvas的样式。同样设置为100%宽度和100%高度，定位设置为相对定位方式。然后添加一些transition 和 transform样式，为后面的jQuery调用做准备。

#canvas {

width: 100%;

height: 100%;

padding: 5.5% 0;

position: relative;

-webkit-transform:translateX(0);

-moz-transform:translateX(0);

-ms-transform:translateX(0);

-o-transform:translateX(0);

transform:translateX(0);

-webkit-transition:.5s ease all;

-moz-transition:.5s ease all;

-o-transition:.5s ease all;

transition:.5s ease all;

}

接下来是#nav元素。它使用绝对定位，离屏幕左侧-300px，这样初始时它是看不见的。同时添加一些transition 和一个旋转-90度的transform效果，通过这个设置来制作侧边栏在3D空间中旋转90度的平滑过渡效果。

#nav {

width: 300px;

height: 100%;

background: #38935f;

position: absolute;

left: -300px;

top: 0;

-webkit-transition:.5s ease all;

-moz-transition:.5s ease all;

-o-transition:.5s ease all;

transition:.5s ease all;

/* By default, rotate the menu 90deg inwards */

-webkit-transform:rotateY(-90deg);

-moz-transform:rotateY(-90deg);

-ms-transform:rotateY(-90deg);

-o-transform:rotateY(-90deg);

transform:rotateY(-90deg);

}

我们还需要一些样式来制作滑动侧边栏效果。下面的CSS样式包含显示列表父元素、隐藏子菜单、背景颜色、菜单图标和加号减号的字体图标的样式。这些样式将在后面用jQuery来管理。

#toggle {

list-style: none;

margin-top: 40px;

}

#toggle div:hover {

background: rgba(0,0,0,0.2);

-webkit-box-shadow:inset 0 -1px rgba(0,0,0,0);

-moz-box-shadow:inset 0 -1px rgba(0,0,0,0);

box-shadow:inset 0 -1px rgba(0,0,0,0);

color: #fff;

}

#toggle div.active {

background: #1f9d55;

}

#toggle div {

cursor: pointer;

display: block;

border-bottom: 1px solid rgba(0,0,0,0.2);

}

span.menu-icons {

font-size: 20px;

height: 20px;

width: 22px;

float: left;

margin: 11px 0px 10px 37px;

color: #fff;

}

span.the-btn {

float: right;

font-size: 20px;

height: 30px;

width: 43px;

margin-top: 10px;

margin-right: 8px;

padding:0;

color: #fff;

}

#toggle ul {

list-style: disc;

display: none;

color: #fff;

background: rgba(0,0,0,0.2);

-webkit-box-shadow:inset 0 -1px rgba(0,0,0,0);

-moz-box-shadow:inset 0 -1px rgba(0,0,0,0);

box-shadow:inset 0 -1px rgba(0,0,0,0);

}

#toggle li a {

line-height: 41px;

color: #fff;

list-style: circle;

width: 240px;

padding: 0;

margin: 0 0 0 50px;

}

#toggle a {

margin: 0 0 0 47px;

padding: 0;

font-family: 'Lato';

color: #fff;

line-height: 41px;

font-weight: normal;

font-size: 18px;

text-decoration: none;

}

#toggle ul li {

margin-left: 109px;

}

#toggle ul li a:hover{

background: #1f9d55;

}

#toggle ul li a {

margin-left: 0;

}

最后是制作菜单的动画效果。我们使用transform属性，在display-nav class上使菜单在3D空间中平滑过渡。这其实就是一个3D翻转动画效果。

#nav {

width: 300px;

height: 100%;

background: #38935f;

position: absolute;

left: -300px;

top: 0;

-webkit-transition:.5s ease all;

-moz-transition:.5s ease all;

-o-transition:.5s ease all;

transition:.5s ease all;

/* By default, rotate the menu 90deg inwards */

-webkit-transform:rotateY(-90deg);

-moz-transform:rotateY(-90deg);

-ms-transform:rotateY(-90deg);

-o-transform:rotateY(-90deg);

transform:rotateY(-90deg);

}

#container.display-nav #canvas {

-webkit-transform:translateX(300px);

-moz-transform:translateX(300px);

-ms-transform:translateX(300px);

-o-transform:translateX(300px);

transform:translateX(300px);

}

/* transition the menu with perspective on "show-nav" */

#container.display-nav #nav {

-webkit-transform-origin:100% 50%;

-moz-transform-origin:100% 50%;

-ms-transform-origin:100% 50%;

-o-transform-origin:100% 50%;

transform-origin:100% 50%;

-webkit-transform:perspective(600px) rotateY(0deg);

-moz-transform:perspective(600px) rotateY(0deg);

-ms-transform:perspective(600px) rotateY(0deg);

-o-transform:perspective(600px) rotateY(0deg);

transform:perspective(600px) rotateY(0deg);

}

JAVASCRIPT

jQuery代码使用来隐藏和展开侧边栏菜单，这通过toggle-navclass来实现。而具体的隐藏和显示又是通过display-nav class来实现。代码中创建了一个函数用于专门显示和隐藏侧边栏：toggleNavigation。

// Calling the function

$(function() {

$('.toggle-nav').click(function() {

toggleNavigation();

});

});

// The toggleNav function itself

function toggleNavigation() {

if ($('#container').hasClass('display-nav')) {

// Close Nav

$('#container').removeClass('display-nav');

} else {

// Open Nav

$('#container').addClass('display-nav');

}

}

现在我们已经制作出了隐藏侧边栏和它的滑动效果。在jQuery代码中创建了一个变量来引用当前的字体图标元素。

$currIcon=$(this).find(“span.the-btn”)

然后将侧边栏子菜单的中有二级子菜单的都将图标状态改变它为(+)。接着使用toggle class来切换存储在$currIcon中的 (+)或(-)字体图标符号。

// SLiding codes

$("#toggle > li > div").click(function () {

if (false == $(this).next().is(':visible')) {

$('#toggle ul').slideUp();

}

var $currIcon=$(this).find("span.the-btn");

$("span.the-btn").not($currIcon).addClass('fa-plus').removeClass('fa-minus');

$currIcon.toggleClass('fa-minus fa-plus');

$(this).next().slideToggle();

$("#toggle > li > div").removeClass("active");

$(this).addClass('active');

});

小结

到此我们就成功的制作出一个效果非常酷的隐藏侧边栏特效。你可以发挥想象制作出更酷的效果。希望这篇文章对你有所帮助。