求助，菜单过多时显示更多菜单，并选中。 [复制链接]

a成

帖子: 767
体力: 558
威望: 0
居住地: 广东省广州市

发表于 2011-12-27 15:48:16 |显示全部楼层

本帖最后由 zengyicheng 于 2011-12-27 15:50 编辑

如下效果，当左侧菜单数目过少时，右侧“更多菜单”隐藏，
当左侧菜单数目过多时，显示右侧"更多菜单",鼠标移动到“更多菜单”时显示出所有的菜单项
并且点击选中左侧菜单时候，右侧"更多菜单"里的相应的菜单也被选中。
请大家帮忙。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	body{ font-size:12px; margin:0; padding:0}
	#menu a{ font-size:12px; text-decoration:none; color:#000000; display:block; float:left; width:100px; height:24px; line-height:24px}
	#menu a:hover{ background-color:#000000; color:#FFFFFF}
	#menu .cur a{ background-color:#000000; color:#FFFFFF}
	#menu{ margin:0px; padding:0px; list-style:none}
	#menu li{ float:left; width:100px; height:24px; line-height:24px; background-color:#999999; margin-left:10px; text-align:center}
	#more{ width:100px; height:24px; line-height:24px; background:#C6F; position:absolute; top:0; right:0}
	#nav{ width:150px; list-style:none; position:absolute; top:24px; right:0; background:#fff; display:none}
	#nav li a{ display:block;background:#999;padding:3px 5px; margin-bottom:5px; color:#000;}
	#nav li a:hover{ background:#000; color:#fff}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单2</a></li>
	<li><a href="#">菜单3</a></li>
	<li><a href="#">菜单4</a></li>
	<li><a href="#">菜单5</a></li>
	<li><a href="#">菜单6</a></li>
	<li><a href="#">菜单7</a></li>
</ul>
<div id="more" onmouseover="document.getElementById('nav').style.display='block'" onmouseout="document.getElementById('nav').style.display='none'">显示更多菜单>></div>
<ul id="nav" onmouseover="document.getElementById('nav').style.display='block'" onmouseout="document.getElementById('nav').style.display='none'">
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单2</a></li>
	<li><a href="#">菜单3</a></li>
	<li><a href="#">菜单4</a></li>
	<li><a href="#">菜单5</a></li>
	<li><a href="#">菜单6</a></li>
	<li><a href="#">菜单7</a></li>
</ul>
<script language="javascript">
function setCookie(name,value,time_sec){
    var Days = 30;
    var exp  = new Date();
    exp.setTime(exp.getTime() + time_sec*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() + ";";
}
function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}
var o=document.getElementById("menu").getElementsByTagName("li");
var m=getCookie("menuIndex");
if(!isNaN(m) && m!=null){
	o[m].className="cur";
}else{
	o[0].className="cur";
}
for(var n=0;n<o.length;n++){
	o[n].onclick=function(){
		for(var i=0;i<o.length;i++){
			o[i].className="";
			o[i].index=i;
 		}
		this.className="cur";
		setCookie("menuIndex",this.index,3600*24*365);
	}
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

color7.taobao.com

西部数码顶级域名注册商39元抢注！

使用道具举报

raoyafei　

初级会员

帖子: 68
体力: 179
威望: 0
居住地: 四川省成都市

发表于 2011-12-27 17:19:08 |显示全部楼层

这个有点难！帮你顶！等高手！！

www.xinfeishop.com

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

zengyicheng　楼主

a成

高级会员 

帖子: 767
体力: 558
威望: 0
居住地: 广东省广州市

发表于 2011-12-28 10:11:20 |显示全部楼层

没有人知道吗？

color7.taobao.com

使用道具举报

yaohaixiao　

会武术的科学家

实习版主

帖子: 2038
体力: 5567
威望: 45
居住地: 浙江省杭州市

发表于 2011-12-28 11:47:20 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	body{ font-size:12px; margin:0; padding:0}
	#menu a{ font-size:12px; text-decoration:none; color:#000000; display:block; float:left; width:100px; height:24px; line-height:24px}
	#menu a:hover{ background-color:#000000; color:#FFFFFF}
	#menu .cur a{ background-color:#000000; color:#FFFFFF}
	#menu{ margin:0px; padding:0px; list-style:none}
	#menu li{ float:left; width:100px; height:24px; line-height:24px; background-color:#999999; margin-left:10px; text-align:center}
	#more{ width:100px; height:24px; line-height:24px; background:#C6F; position:absolute; top:0; right:0}
	#nav{ width:150px; list-style:none; position:absolute; top:24px; right:0; background:#fff;}
	#nav li a{ display:block;background:#999;padding:3px 5px; margin-bottom:5px; color:#000;}
	#nav li a:hover{ background:#000; color:#fff}
	
	.hide{display:none;}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单2</a></li>
	<li><a href="#">菜单3</a></li>
	<li><a href="#">菜单4</a></li>
	<li><a href="#">菜单5</a></li>
	<li><a href="#">菜单6</a></li>
	<li><a href="#">菜单7</a></li>
</ul>
<div id="more" class="hide">显示更多菜单&gt;&gt;</div>
<ul id="nav" class="hide">
	<li><a href="#">菜单1</a></li>
	<li><a href="#">菜单2</a></li>
	<li><a href="#">菜单3</a></li>
	<li><a href="#">菜单4</a></li>
	<li><a href="#">菜单5</a></li>
	<li><a href="#">菜单6</a></li>
	<li><a href="#">菜单7</a></li>
</ul>
<script type="text/javascript">
(function(){
	var Cookie = {
		setCookie: function(name, value, time_sec){
			var Days = 30;
			var exp = new Date();
			exp.setTime(exp.getTime() + time_sec * 1000);
			document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";";
		},
		getCookie: function(name){
			var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
			if (arr != null) 
				return unescape(arr[2]);
			return null;
		}
	},
	tabs = document.getElementById("menu").getElementsByTagName("li"),
	tabIndex = Cookie.getCookie("menuIndex") || 0,
	moreBar = document.getElementById("more"),
	navBar = document.getElementById('nav'),
	navItems = navBar.getElementsByTagName('li'),
	lastTab = null,
	lastNav = null,
	i = 0,
	len = tabs.length,
	min = 4; // 超过多少个显示右边导航
	
	// 设置选中项
	tabs[tabIndex].className = "cur";
	lastTab = tabs[tabIndex];
	navItems[tabIndex].className = "cur";
	lastNav = navItems[tabIndex];
	
	// 设置是否显示浮动的更多导航
	if (len > min) {
		moreBar.className = '';
		navItems.className = '';
	}
	
	for (; i < len; i+=1) {
		tabs[i].onclick = function(i){
			return function(evt){
				lastTab.className = "";
				lastNav.className = "";
				tabs[i].className = "cur";
				navItems[i].className = "cur";
				lastTab = tabs[i];
				lastNav = navItems[i];
				Cookie.setCookie("menuIndex", i, 3600 * 24 * 365);
			}
		}(i);
	}
	
	moreBar.onmouseover = function(){
		navBar.className = "";
	};
	
	moreBar.onmouseout = function(){
		navBar.className = "hide";
	};
})();
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

YAOHAIXAIO.COM

使用道具举报