网站建设经验与团队,flash+xml地图网站,国外企业画册设计网站,效果图制作属于什么经营范围横纵向的菜单效果#xff0c;点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单#xff0c;鼠标离开#xff0c;子菜单隐藏。 HTML代码#xff1a; span stylefont-size:18px;!DOCTYPE html
html xmlnshttp://www.w3.o… 横纵向的菜单效果点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单鼠标离开子菜单隐藏。 HTML代码 span stylefont-size:18px;!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title横纵向的菜单/titlelink hrefcss/menu.css relstylesheet /script srcjs/JQuery.js/scriptscript srcjs/menu.js/script
/head
bodyulli classmaina href#菜单项1/aullia href#菜单项11/a/lilia href#菜单项12/a/li/ul/lili classmaina href#菜单项2/aullia href#菜单项21/a/lilia href#菜单项22/a/li/ul/lili classmaina href#菜单项3/aullia href#菜单项31/a/lilia href#菜单项32/a/li/ul/li/ulbr /br /br /ulli classhmaina href#菜单项1/aullia href#菜单项11/a/lilia href#菜单项12/a/li/ul/lili classhmaina href#菜单项2/aullia href#菜单项21/a/lilia href#菜单项22/a/li/ul/lili classhmaina href#菜单项3/aullia href#菜单项31/a/lilia href#菜单项32/a/li/ul/li/ul
/body
/html
/span CSS代码 span stylefont-size:18px;body {
}
ul,li{/*清除菜单前面的点和圈*/list-style:none;}
ul {padding:0;margin:0;
}
.main ,.hmain {background-image:url(../images/title.gif);background-repeat:repeat-x;width:100px;
}
li{background-color:#999;
}
a{/*取消全部的下划线*/text-decoration:none;padding-left:15px;display:block ; /*让a标签充满这个区域*//*针对IE6*/display:inline-block;width:85px;padding-top:3px;padding-bottom:3px;
}
.main a , .hmain a{color:white;background-image:url(../images/collapsed.gif);background-repeat:no-repeat;background-position:3px center;
}
.main li a, .hmain li a {color:black;background-image:none;
}
.main ul , .hmain ul{display:none;
}
.hmain{float:left;margin-left:1px;
}/span JQuery代码 span stylefont-size:18px;$(function () {$(.main a , .hmain a).click(function () {//找到主菜单相应的子菜单var ulNode $(this).next(ul);//if (ulNode.css(display) none) {// ulNode.css(display, block);//} else {// ulNode.css(display, none);//}//ulNode.show(normal);//slow, fast, 500//ulNode.hide();//ulNode.toggle();//显示和隐藏。自己主动推断//ulNode.slideDown(slow);//显示//ulNode.slideUp();//隐藏ulNode.slideToggle();changeIcon($(this));});$(.hmain).hover(function () {$(this).children(ul).show(fast);changeIcon($(this).children(a));}, function () {$(this).children(ul).hide(fast);changeIcon($(this).children(a));});
});
//改动主菜单的指示图标
function changeIcon(mainNode) {if (mainNode) {if (mainNode.css(background-image).indexOf(collapsed.gif)0) {mainNode.css(background-image, url(../images/expanded.gif));} else {mainNode.css(background-image, url(../images/collapsed.gif));}}}/span 1.HTML总结 1.页面中的菜单项能够通过嵌套ul和li来表示 2.CSS总结 1.list-style属性为none时能够清除ul和li前面的小圆点 2.能够使用background-repeat来控制背景图的反复填充方式 3. text-decoration属性值为none时能够取消文字上的下划线 4,.display的值为none能够用于隐藏元素 3.JQuery总结 1. .main a 和 .main a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点后者仅仅选择了.main的子节点中的a节点 2. showhide方法能够用于显示或隐藏元素。没有參数时的效果和改动CSS的display属性效果一样。參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。 3.toggle方法更为强大能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来能够让隐藏的元素显示出来參数用法和showhide同样。
