2007-09-25
使用javascript制作一个menu效果
关键字: javascript menu
特效介绍:
当鼠标划过某个链接的时候展开一个下拉菜单供选择:
菜单描述:
IE6下的脚本控制,否则IE6下不好用:
CSS样式:
当鼠标划过某个链接的时候展开一个下拉菜单供选择:
菜单描述:
<ul id="haulMenu_menu">
<li><a href="#" class="cBlack">点评</a>
<ul>
<li><a href="">呵呵</a></li>
<li><a href="#">呵呵呵</a></li>
<li><a href="#">呵呵呵呵</a></li>
<li><a href="#">呵呵呵呵呵</a></li>
<li><a href="#">呵呵呵呵呵呵</a></li>
</ul>
</li>
</ul>
IE6下的脚本控制,否则IE6下不好用:
function buildEventsForIE() {
//IE6 can't handle css menu. this adds mouse events for IE6.
majVer = navigator.appVersion.charAt(navigator.appVersion.indexOf('MSIE ')+5);
if (majVer>=6) {
navRoot = document.getElementById("haulMenu_menu");
stuff="";
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.children[1].style.display = "block";
}
node.onmouseout=function() {
this.children[1].style.display = "none";
}
subNode = node.childNodes[2].childNodes;
for (x=0; x<subNode.length; x++) {
if (subNode[x].children[1] &&
subNode[x].children[1].nodeName=="ul") {
// find nested lists
subNode[x].onmouseover=function() {
this.children[1].style.display = "block";
}
subNode[x].onmouseout=function() {
this.children[1].style.display = "none";
}
}
}
}
}
//CSS tweaks
document.write("<style type='text/css'>");
document.write("#haulMenu ul ul {top: 20px
!important; top:18px; margin-left: 22px;}");
document.write("#haulMenu ul ul ul {top: -1px;}");
document.write("</style>");
}
}
if (document.all) buildEventsForIE();
CSS样式:
<style>
body { text-align:center;margin:0;padding:0; background: #FFF; font-size:12px;
color:#000;}
/*链接颜色*/
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 下拉菜单 */
.haulMenu{float:left;width:40px; background:url(i4_1.gif) 0 10px no-repeat;}
.haulMenu ul { margin:0; padding:0; }
.haulMenu ul li {list-style-type:none; margin:0; width:40px;
position: relative; }/*修改子菜单*/
.haulMenu li a {display: block;}
.haulMenu .s1{ padding:3px 0 0 !important;padding:5px 0 0;}
.haulMenu ul ul {background: #ecf3f9; border:1px solid #b2b2b2;
width:38px;position: relative; }
/* function */
.haulMenu ul li ul li a{display:block; padding:0 0 !important;}
.haulMenu ul li ul li a:hover{background:#1f3a87; color:#fff;}
.haulMenu ul li:hover > ul {display: block;}
.haulMenu ul ul {display: none; position: absolute; }/*修改子菜单*/
</style>
- 23:46
- 浏览 (456)
- 评论 (0)
- 分类: JavaScript
- 相关推荐
发表评论
- 浏览: 77464 次
- 性别:


- 详细资料
搜索本博客
我的相册
DSC_0341
共 4 张
共 4 张
最近加入圈子
最新评论
-
关于form使用form.submit( ...
不错 怎么会出现这样的情况 我不大明白
-- by chgl_chenganglin -
Hibernate中LockMode 在 ...
gtrdhg 引用 [img][/img][url][/url][fl ...
-- by skydongtang -
Hibernate中LockMode 在 ...
[color=red][/color]
-- by skydongtang -
safari 3 public beta版本 ...
safari看英文还是很舒服的
-- by cuiyi.crazy -
Hibernate中使用Annotati ...
还有没有其他操作方式
-- by huangyy






评论排行榜