前言：
现在各位老铁们对“css菜单伸缩”大约比较着重，小伙伴们都想要剖析一些“css菜单伸缩”的相关文章。那么小编也在网上汇集了一些关于“css菜单伸缩””的相关文章，希望朋友们能喜欢，各位老铁们快快来了解一下吧！实例1：伸缩菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";><html><head><title>伸缩的菜单，用jQuery重写(二级菜单)</title><style><!--body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation > ul {list-style-type:none; /* 不显示项目符号 */margin:0px;padding:0px;}#navigation > ul > li {border-bottom:1px solid #ED9F9F; /* 添加下划线 */}#navigation > ul > li > a{display:block; /* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515; /* 左边的粗红边 */border-right:1px solid #711515; /* 右侧阴影 */}#navigation > ul > li > a:link, #navigation > ul > li > a:visited{background-color:#c11136;color:#FFFFFF;}#navigation > ul > li > a:hover{ /* 鼠标经过时 */background-color:#990020; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */}/* 子菜单的CSS样式 */#navigation ul li ul{list-style-type:none;margin:0px;padding:0px 0px 0px 0px;}#navigation ul li ul li{border-top:1px solid #ED9F9F;}#navigation ul li ul li a{display:block;padding:3px 3px 3px 0.5em;text-decoration:none;border-left:28px solid #a71f1f;border-right:1px solid #711515;}#navigation ul li ul li a:link, #navigation ul li ul li a:visited{background-color:#e85070;color:#FFFFFF;}#navigation ul li ul li a:hover{background-color:#c2425d;color:#ffff00;}#navigation ul li ul.myHide{ /* 隐藏子菜单 */display:none;}/*不再需要myShow样式#navigation ul li ul.myShow{display:block;}*/--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){//找到所有li标记中包含的ul标记//然后找到它的前一个标记（即<a>），并添加click()事件$("li").find("ul").prev().click(function(){//点击<a>时让它后面的兄弟（即<ul>）切换CSS样式$(this).next().toggleClass("myHide");});});/*//替换原来的例题,javascript编写的function change(){$(this).parent().find("ul").toggleClass("myHide");//通过父元素li，找到兄弟元素ulvar oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//CSS交替更换来实现显、隐if(oSecondDiv.className == "myHide")oSecondDiv.className = "myShow";elseoSecondDiv.className = "myHide";}window.onload = function(){$("li").find("ul").prev().click(change);/*var oUl = document.getElementById("listUL");var aLi = oUl.childNodes; //子元素var oA;for(var i=0;i<aLi.length;i++){//如果子元素为li，且这个li有子菜单ulif(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){oA = aLi[i].firstChild; //找到超链接oA.onclick = change; //动态添加点击函数}}}*/</script></head><body><div id="navigation"><ul id="listUL"><li><a href="#">Home</a></li><li><a href="#">News</a><ul class="myHide"><li><a href="#">Lastest News</a></li><li><a href="#">All News</a></li></ul></li><li><a href="#">Sports</a><ul class="myHide"><li><a href="#">Basketball</a></li><li><a href="#">Football</a></li><li><a href="#">Volleyball</a></li></ul></li><li><a href="#">Weather</a><ul class="myHide"><li><a href="#">Today's Weather</a></li><li><a href="#">Forecast</a></li></ul></li><li><a href="#">Contact Me</a></li></ul></div></body></html>实例2： 带滑动效果和解决浮动
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;font-size: 14px;list-style: none;}body{background-color: #999;}ul{width: 800px;height: 40px;text-align: center;line-height: 40px;margin: 100px auto 0;background-color: skyblue;}ul>li{float: left;z-index: 99;position: relative;}ul>li>a,ol>li>a{color: #fff;width: 100px;height: 40px;display: block;text-decoration: none;}ol{display: none;background-color: skyblue;position: absolute;left: 0;top: 40px;}ul>li:hover>a{background-color: dodgerblue;}ol>li>a:hover{background-color: deepskyblue;}</style></head><body><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><ol><li><a href="">HTML基础</a></li><li><a href="">CSS入门</a></li><li><a href="">JS放弃</a></li></ol></li><li><a href="">就业信息</a></li><li><a href="">师资团队</a><ol><li><a href="">潘老师</a></li><li><a href="">邵老师</a></li><li><a href="">朱老师</a></li></ol></li><li><a href="">关于我们</a></li></ul><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><p>这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素这是一个元素</p><script src="js/jquery-2.2.4.js"></script><script type="text/javascript">/*$("ul>li>a").mouseover(function(){//$(this).next().css("display","block")$(this).next().slideDown();})$("ul>li>a").mouseout(function(){$(this).next().slideUp();})*///我们以后使用移入移出尽量使用mouseenter和mouseleave$("ul>li").mouseenter(function(){$(this).children("ol").stop(true).slideDown(); //stop(true) 用户清除当前队列, 防止重复滑动菜单})$("ul>li").mouseleave(function(){$(this).children("ol").stop(true).slideUp();})</script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css菜单伸缩
