上个星期飞仔(既飞飞)因为项目上要应用到"上拉菜单",并且"上拉菜单"中的相邻子菜单之间是有间隙且上拉菜单是没有底色的(既可以通过间隙看到后面的内容),因为最近工作忙当时只好先写一个Demo给飞仔应付一下,今天自己重新写了一下,(题外话:)在做的过程中又发现了另一问题既position(定位)在各浏览器的差异性;
在这Demo主要是利用一个标签当菜单的背景,并且把背景设为透明; 在使用时只要把透明值设为极小就可以了.
应用知识点:
- CSS透明效果.
- 透明背景的position(定位)问题.
- 透明背景的高度自适问题.
缺点:
- 对于这个案例并不是完美,首先HTML标签语义没较合理体现,dt标签应该是"定义项目"的意思;
- 透明背景自适应问题在IE6中只能用负边距实现.
方法2: 对于这样的案例,菜单上下拉可以不用JS,只使用CSS就可以做到,大家可以举一反三.
方法3: 对于这样的案例,用JS也是可以实现并且能使HTML标签语义更合理地应用.
关于上下拉菜单相邻菜单之间的有间隙的问题,解决方法.
关于上下拉菜单相邻菜单之间的有间隙的问题,解决方法.
关于上下拉菜单相邻菜单之间的有间隙的问题,解决方法.
关于上下拉菜单相邻菜单之间的有间隙的问题,解决方法.
关于上下拉菜单相邻菜单之间的有间隙的问题,解决方法.
<style type="text/css">
/* author 爱左看右 */
/* date 2007/12/03 */
/* site www.msleft.com */
body { font:75%/1.6em "Arial","宋体",Verdana,sans-serif; text-align:center; color:#000;}
body,html{height:100%;} /* 菜单之间有间隙还能实现鼠标移到下拉菜单下面的 "关键点"解决IE7中的定位造成所参照的父对象问题 */
* { margin:0; padding:0; }
ul,ol,dl {list-style:none;}
h1 {font-size:2em; }
em {font-style:italic;}
a { color:#e06630; text-decoration: none; }
a:hover {color: #c60; background: #ccc;}
#nav_demo {margin:100px auto 0; width:404px; height:28px; border-right:1px solid #666; }
#nav_demo li {text-align:center; float:left; display:block; width:100px; line-height:26px; border:1px solid #666; border-right:0; position:relative; }
#nav_demo li a {display:block; }
#nav_demo li a:hover {color:#f00; background:#f2f2f2; }
#nav_demo dl {display:none; }
#nav_demo .hover dl {display:block; position:absolute; top:27px; left:-1px; overflow:hidden; width:102px; }
#nav_demo dd {border:1px solid #f00; margin-bottom:5px; position:relative; z-index:10; }
#nav_demo dt {
/* (横拟一个透明背景) 这个CSS主要解决IE7 跟IE6 下 当子菜单显示时且该子菜单背面有内容出现时,相邻菜单之间出现间隙造成鼠标无法移到下一菜单上 */
display:block; position: absolute; left:0; top:0; z-index:1; width:150px; height:100%; background:#000;
/* 使用时只要把以下 "透明数值" 改小就可以了 */
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Moz + FF */
opacity: 0.2; /* 支持CSS3的浏览器（FF 1.5也支持） */
-khtml-opacity:0.2; /* 旧safari */
}
#nav_demo dd a {display:block; width:100%; background:#e7e95c; }
#nav_demo dt {margin-bottom:-1000px; padding-bottom:1000px; /* 解决IE6下 DT高度没法自适应问题, 爱左看右很不情愿地用上负边距 */ }
#tempbox {border:1px solid #000; width:500px; margin:3px auto; }
</style>
<script type="text/javascript">
<!--
function hoverMenu(id) {
var root = document.getElementById(id);
for (var i=0;i<root.childNodes.length;i++ ) {
node = root.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover = function (){this.className = "hover"; }
}
node.onmouseout = function (){this.className = this.className.replace("hover", "");}
}
}
window.onload = function() {
hoverMenu("nav_demo");
}
//-->
</script>
<ul id="nav_demo">
<li><a href="#" title="">菜单一</a>
<dl>
<dt></dt>
<dd><a href="#" title="">菜单一 1-1</a></dd>
<dd><a href="#" title="">菜单一 1-2</a></dd>
<dd><a href="#" title="">菜单一 1-3</a></dd>
<dd><a href="#" title="">菜单一 1-4</a></dd>
</dl>
</li>
<li><a href="#" title="">菜单二</a>
<dl>
<dt></dt>
<dd><a href="#" title="">菜单二 2-1</a></dd>
<dd><a href="#" title="">菜单二 2-2</a></dd>
<dd><a href="#" title="">菜单二 2-3</a></dd>
<dd><a href="#" title="">菜单二 2-4</a></dd>
<dd><a href="#" title="">菜单二 2-5</a></dd>
<dd><a href="#" title="">菜单二 2-6</a></dd>
</dl>
</li>
<li><a href="#" title="">菜单三</a>
<dl>
<dt></dt>
<dd><a href="#" title="">菜单三 3-1</a></dd>
<dd><a href="#" title="">菜单三 3-2</a></dd>
<dd><a href="#" title="">菜单三 3-3</a></dd>
<dd><a href="#" title="">菜单三 3-4</a></dd>
</dl>
</li>
<li><a href="#" title="">菜单四</a>
<dl>
<dt></dt>
<dd><a href="#" title="">菜单四 4-1</a></dd>
<dd><a href="#" title="">菜单四 4-2</a></dd>
<dd><a href="#" title="">菜单四 4-3</a></dd>
<dd><a href="#" title="">菜单四 4-4</a></dd>
</dl>
</li>
</ul>
<div id="tempbox">
<p>关于上下拉菜单<a href="#" title="">相邻菜单之间的有间隙的</a>问题,解决方法.</p>
<p>关于上下拉菜单<a href="#" title="">相邻菜单之间的有间隙的</a>问题,解决方法.</p>
<p>关于上下拉菜单<a href="#" title="">相邻菜单之间的有间隙的</a>问题,解决方法.</p>
<p>关于上下拉菜单<a href="#" title="">相邻菜单之间的有间隙的</a>问题,解决方法.</p>
<p>关于上下拉菜单<a href="#" title="">相邻菜单之间的有间隙的</a>问题,解决方法.</p>
</div>