положение меню

Talexandria · January 29, 2008

Доброе время суток!

Подскажите как привязать меню, в столбец таблицы. И Если окно уменьшить в размере, чтоб меню оставалось в этом столбце, а не выезжало за его пределы.

Иван Шумов · January 29, 2008

эмм.. а пример чтоб его переделать? код в студию

Talexandria · January 29, 2008

Пжалуйста и код:

html:

 
<html>
<head>
	<title>Menu Test</title>
	<script src="dbMenu.js" type="text/javascript"></script>
	<link href="global.css" type="text/css" rel="stylesheet" media="screen">
	<link href="collapse.css" type="text/css" rel="stylesheet" media="screen">
	</head>

<body>

<table width="100%" height="100%" border="1" cellpacing="0" cellpadding="0">

<tr height="20%" >
<td width="20%" > 
<table cellpacing="0" cellpadding="0"><tr><td></td></tr></table>

</td>

<td colspan="2" width="40%" ><p>Название</p></td>
<td colspan="2" width="40%" ><p>фото</p></td>

</tr>


<tr height="5%">

<td width="20%"><p>Пусто</p></td>
<td width="15%" align="center">
</td>
<td colspan="2"><p>Поиск</p></td>
<td width="13%" align="center">




</td>

</tr>


<tr height="65%">

<td width="20%" >
<table width="100%" height="100%" border="2" cellpacing="0" cellpadding="0">
<tr><td>
	<ul id="menu" class="dbMenu">
 <li><a href="./1.html">Главная</a></li>
		<li>О компании
		<ul>
			<li><a href="../collapse/index.html">История </a></li>
			<li><a href="./2.html">Структура</a></li>
			<li><a href="../side/index.html">Политика </a></li>
			<li><a href="../side/index.html">Конференции,</a></li>
			<li><a href="../side/index.html">Награды</a></li>
			<li><a href="../side/index.html">Программы</a></li>
			<li><a href="../side/index.html">Общество</a></li>
			<li><a href="../side/index.html">СМИ</a></li>
		</ul>
		</li>
		<li>Система 


		<ul>
			<li><a href="./1.html">О СМК</a></li>
			<li><a href="collapse.html">Политика </a></li>
			<li><a href="collapse.html">Сертификаты</a></li>
		</ul>
</li>


				<li>деятельность
		<ul>
			<li><a href="common.html">Услуги</a></li>
			<li><a href="collapse.html">Проекты</a></li>
		</ul>
		</li>
		<li><a href="script.html">Новости</a></li>
		<li><a href="script.html">Контакты</a></li>
	</ul>	
</td></tr>
</table>
</td>
<td width="80%" colspan=4"><p>Основное</p></td>
</tr>


<tr height="10%">

<td width="100%" colspan="5"><p>ярлычки</p></td>
</tr>


</table>


</body>
</html>

global.css

#menu{
	position:absolute;
	z-index:1;
	top:30%;
	left:1%;
	padding:1%;
	margin:2%;
	list-style:none;

}
body>#menu{
	position:fixed;
}
li ul{
	position:relative;
	display:none;
	padding:12px;	
	margin:0px;
	list-style:none;
}
li{
	position:relative;

	background-color:#6666ff;
	border:1px solid black;
	padding:2px;
	margin:0px;
	color:#99ffff;

}
.subMenu{
	background-repeat:no-repeat
}
.click{
	background-color:#6666cc;
	color:#99ffff;
}
.click ul{
	display:block;
}
.hover, ul li a:hover{
	cursor:pointer;
	background-color:#6699ff;
	color:#000099;
}
li ul li.hover, li ul li.hover a:hover{
	background-color:#6699ff;
}
li a{
	width:100%
}
li a, li ul li a, li.hover ul li a{
	text-decoration:none;
	color:white;
}
li.hover a, li ul li.hover a{
	color:#660033;
	text-decoration:none;

}

collapse.css

#menu{
	width:16em;/*ширина строки*/
	font-size:10pt;
	font-family:verdana;
}
.subMenu{
	background-image:url('./images/down.gif');
	background-position:bottom right;
}
.click{
/*	background-image:none;	*/
	background-image:url('./images/top.gif');	
}

js:

var dbMenu = {
 init: function(){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];

 dbMenu.styleSubMenus(menu);

 addEvent(menu, 'mouseover', dbMenu.hover, false);
 addEvent(menu, 'mouseout', dbMenu.hover, false);
 addEvent(menu, 'click', dbMenu.click, false);
 addEvent(menu, 'click', dbMenu.nav, false);
 }

 addEvent(document, 'click', dbMenu.removeClick, false);

 },

 hover: function(e){
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 if(target.className.search(/bhoverb/) == -1){
 target.className += ' hover';
 }else{
 target.className = target.className.replace(/hover/g, '');
 }
 },

 click: function(e){
 if(window.event){
 window.event.cancelBubble = true;
 }
 if(e && e.stopPropagation){
 e.stopPropagation();
 }
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 if(target.className.search(/bclickb/) == -1){
 dbMenu.removeClick();
 target.className += ' click';
 }else{
 target.className = target.className.replace(/click/g, '');
 }
 },

 removeClick: function(){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];
 for(var j = 0; j < menu.childNodes.length; j++){
 var node = menu.childNodes[j];
 if(node.nodeName.toLowerCase() == 'li'){
 node.className = node.className.replace(/click/g, '');
 }
 }
 } 
 },


 nav: function(e){
 if(window.event){
 window.event.cancelBubble = true;
 }
 if(e && e.stopPropagation){
 e.stopPropagation();
 }
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 for(var i = 0; i < target.childNodes.length; i++){
 var node = target.childNodes[i];
 if(node.nodeName.toLowerCase() == 'a'){
 window.location = node.href;
 break;
 }
 }
 },

 getTarget: function(target, elm){
 if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
 return dbMenu.getTarget(target.parentNode, elm);
 }else if(target.nodeName.toLowerCase() == 'body'){
 return null;
 }else{
 return target;
 }
 },

 styleSubMenus: function(menu){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];
 for(var j = 0; j < menu.childNodes.length; j++){
 var node = menu.childNodes[j];
 if(node.nodeName.toLowerCase() == 'li'){
 for(var l = 0; l < node.childNodes.length; l++){
 var nd = node.childNodes[l];
 if(nd.nodeName.toLowerCase() == 'ul'){
 node.className += " subMenu";
 break;
 }
 }
 }
 }

 }
 }
}

function addEvent(elm, evType, fn, useCapture){ //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}else if(elm.attachEvent){
		var r = elm.attachEvent('on' + evType, fn);
		return r;
}else{
		elm['on' + evType] = fn;
	}
}

addEvent(window, 'load', dbMenu.init, false);

Sign In

положение меню

Question

Talexandria

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Иван Шумов

Link to comment

Share on other sites

Talexandria

Link to comment

Share on other sites

Обсуждения

Forums

Important Information