在前几天无意中翻看网页代码的过程中，无意中发现了微信官网的nav里有一个很有意思的小细节。在跟着代码学习了一番，在网上阅读了相关资料，原来这就是传说中的滑动门技术。
接下来就来分享一下我个人对滑动门的理解及实现方法和代码吧。
滑动门的效果：
这是原来版本的，可以看到“首页”的标签是有一个明显的凹下的效果。
在调整完这个nav的长度后，大家还是会看到一个凹下的效果，这个效果和我以前接触到的，或者用自己方法来实现的方法是不一样的，首先，这个装背景图片的盒子不是固定的，它是可以随着盒子内容的长度改变而改变的，所以，大家将其称之为“滑动门”。
说到这里，那么是怎么实现的呢：
先来简单的分析一下：既然是“滑动的”，那么他就是没有固定的宽度的，“有宽必死”，因为你宽度一旦是确定的了，这个盒子的宽度就是固定的，也就不会出现滑动的效果了。
其次，既然可以滑动，那么，我们可不可以用两个部分将他们的左右两边分别装起来，将内容夹在中间，这样一来随着内容的改变，就可以将左右两边的背景“推”着走，就可以实现“滑动”的效果啦。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background: url(images/wx.jpg) repeat-x;
}
.nav li{
list-style: none;
float: left;
}
.nav li a{
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
text-decoration: none;
color: #fff;
font-size: 700;
padding-left: 15px;
line-height: 33px;
}
.nav li a span{
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
.nav a:hover , .nav a:hover span{
background-image: url(images/ao.png);
/* 只写一个background-image的目的就是当鼠标附上去时只改变图片
，以前图片的样式是不会改变的 */
/* 这个鼠标附上时会把前边的全部层叠掉，所以还是得添加no-repeat */
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>导航说明</span></a></li>
<li><a href="#"><span>菜单栏</span></a></li>
</ul>
</body>
</html>实现效果：
我分别将定义在左边的a标签，和定义在右边的span标签里分别分别放置左右“两扇门”的背景图片，再通过一些基本CSS的样式修饰，再加上一个伪类;hover就可以实现鼠标放上去后nav标签的背景图片从凹下变为凸起的效果了。并且更重要的是，他的盒子可以通过更改盒子内容文字的数量从而可以实现”滑动门”的“滑动效果”。
emmm…写的有点啰嗦，，，如果有什么质疑或者问题可以私聊我，大家一起学习一起进步呀。