所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于a的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在span中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。
参考代码：
<ul id="nav">
<li><a href=""><span>Home</span></a></li>
<li><a href=""><span>Contact us</span></a></li>
<li><a href=""><span>Web dev</span></a></li>
<li><a href=""><span>Map</span></a></li>
</ul>
说明：只要是a标签和span标签的设置，将span嵌套在a标签中，以便设置鼠标经过样式时可以使用#nav a:hover span {}来设置span内图像的变化。
具体的实现在于CSS部分：
<style type="text/css">
<!--
#nav a {
margin-left:2px
float:left
background:url(左侧图片地址) no-repeat left top
padding-left:左侧图片宽度
text-decoration:none
}
#nav a span {
display:block
background:url(file:D/img/right.jpg) no-repeat right top
padding:5px 15px 3px 6px
color:#fff
}
#nav li {
float:left
display:block
margin:0
padding:0
}
#nav a:hover {}
#nav a:hover span {}
-->
</style>
效果图：
<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />
<title>滑动门</title>
<style>
<!--
* {
margin:0
padding:0
font-size:12px
}
body {
padding:30px
}
.tabsBox {
width:400px
margin:20px auto
}
.tabs {
height:20px
}
.tabs li {
width:80pxtext-align:center
padding-top:2px
line-height:18px
float:left
background-color:#ccc
margin-right:5px
list-style:none
position:relative
cursor:pointer
color:#333
}
.tabs li span {
display:none
}
.tabs .cur {
background-color:#f0f0f0
}
.tabs .cur span {
display:block
width:1px
height:1px
border:solid 8px
border-color:#f0f0f0 #fff #fff #fff
position:absolute
top:20px
left:32px
overflow:hidden
z-index:-1
}
.cons {
height:120px
padding:8px 12px
overflow:hidden
border:1px solid #f0f0f0
position:relative
z-index:1
}
.cons ul li {
list-style:none
line-height:20px
}
.hidden {
display:none
}
.block {
display:block
}
-->
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推荐下载<span></span></li>
<li>下载排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li>
<li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li>
<li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li>
<li><a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li>
<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>
</ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>
<li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li>
<li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li>
<li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li>
<li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li>
<li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li>
<li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li>
<li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换学习版，没有过多修饰</a></li>
<li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告代码，Js演示</a></li>
<li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li>
</ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li>
<li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li>
<li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li>
<li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li>
<li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
</ul>
</div>
</div>
<script>
<!--
var lis = document.getElementByIdx_x("Tabs").getElementsByTagName_r("li")
var uls = document.getElementByIdx_x("TabsCon").getElementsByTagName_r("ul")
var order = 0
for(var i=0i<lis.lengthi++){
lis[i].value = i
lis[i].onmouseover = function(){
ChangeTabs(this.value)
}
uls[i].className = "hidden"
}
lis[order].className = "cur"
uls[order].className = "block"
function ChangeTabs(nowTab){
lis[order].className = ""
uls[order].className = "hidden"
order = nowTab
lis[nowTab].className = "cur"
uls[nowTab].className = "block"
}
-->
</script>
</body>
</html>
什么是CSS自适应宽度滑动门菜单？CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽，就拿下边的实例来说，是按4个字的宽度来设计的，如果其中一项为5个字或更多，就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化，这就是css自适应宽度菜单。
